From 450e02fbae3d9edbcaf097b2f80184b9e759af14 Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Fri, 10 May 2024 15:35:16 -0400
Subject: [PATCH 01/12] Add dummy dark theme, convert to useTheme hook

---
 packages/desktop/src/renderer/Root.tsx        |   4 +-
 .../File/FileComponent/FileComponent.tsx      |   5 +-
 .../UploadedImagePlaceholder.tsx              |   5 +-
 .../ContextMenu/ContextMenu.component.tsx     |  10 +-
 .../MathMessage/MathMessageComponent.tsx      |   3 +-
 .../src/renderer/components/Titlebar.tsx      |   4 +-
 .../ui/OpenlinkModal/OpenlinkModal.tsx        |   6 +-
 .../widgets/channels/NestedMessageContent.tsx |   7 +-
 .../widgets/channels/TextMessage.tsx          |   3 +-
 .../widgets/channels/WelcomeMessage.test.tsx  |   2 +-
 .../PossibleImpersonationAttackModal.test.tsx |   2 +-
 .../update/UpdateModalComponent.stories.tsx   |   2 +-
 .../widgets/userLabel/UserLabel.test.tsx      |   2 +-
 .../duplicate/DuplicateModal.test.tsx         |   2 +-
 .../unregistered/UnregisteredModal.test.tsx   |   2 +-
 .../BreakingChangesWarning.tsx                |   3 +-
 .../containers/widgets/update/UpdateModal.tsx |   3 +-
 .../src/renderer/storybook/decorators.tsx     |   2 +-
 .../renderer/testUtils/renderComponent.tsx    |   2 +-
 packages/desktop/src/renderer/theme.ts        | 190 +++++++++++++++++-
 20 files changed, 228 insertions(+), 31 deletions(-)

diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx
index 32c931de55..b9bd2b9e9a 100644
--- a/packages/desktop/src/renderer/Root.tsx
+++ b/packages/desktop/src/renderer/Root.tsx
@@ -14,7 +14,7 @@ import SentryWarning from './containers/widgets/sentryWarning/sentryWarning'
 import SettingsModal from './components/Settings/Settings'
 import UpdateModal from './containers/widgets/update/UpdateModal'
 import QuitAppDialog from './containers/ui/QuitAppDialog'
-import theme from './theme'
+import { lightTheme, darkTheme } from './theme'
 import CreateCommunity from './components/CreateJoinCommunity/CreateCommunity/CreateCommunity'
 import JoinCommunity from './components/CreateJoinCommunity/JoinCommunity/JoinCommunity'
 import CreateChannel from './components/Channel/CreateChannel/CreateChannel'
@@ -43,7 +43,7 @@ export const persistor = persistStore(store)
 export default () => {
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={lightTheme}>
         <DndProvider backend={HTML5Backend}>
           <HashRouter>
             <Provider store={store}>
diff --git a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
index abb1818f39..d9c7c14015 100644
--- a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { CircularProgress, Typography } from '@mui/material'
+import { CircularProgress, Typography, useTheme } from '@mui/material'
 import { DisplayableMessage, DownloadState, DownloadStatus, FileMetadata, CancelDownload } from '@quiet/types'
 import { formatBytes } from '@quiet/state-manager'
-import theme from '../../../../theme'
 import Icon from '../../../ui/Icon/Icon'
 import fileIcon from '../../../../static/images/fileIcon.svg'
 import clockIconGray from '../../../../static/images/clockIconGray.svg'
@@ -141,6 +140,8 @@ export const FileComponent: React.FC<FileComponentProps & FileActionsProps> = ({
   downloadFile,
   cancelDownload,
 }) => {
+  const theme = useTheme()
+
   if (!message.media) return null
   const { cid, path, name, ext } = message.media
 
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
index bbf25e41f2..ee0f633abe 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
@@ -1,10 +1,9 @@
-import { CircularProgress } from '@mui/material'
+import { CircularProgress, useTheme } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { DownloadStatus, DownloadState } from '@quiet/types'
 import { formatBytes } from '@quiet/state-manager'
 import React from 'react'
 import imageIcon from '../../../../static/images/imageIcon.svg'
-import theme from '../../../../theme'
 import Icon from '../../../ui/Icon/Icon'
 import Tooltip from '../../../ui/Tooltip/Tooltip'
 
@@ -78,6 +77,8 @@ export const UploadedImagePlaceholder: React.FC<UploadedImagePlaceholderProps> =
   ext,
   downloadStatus,
 }) => {
+  const theme = useTheme()
+
   const width = imageWidth >= 400 ? 400 : imageWidth
 
   const downloadState = downloadStatus?.downloadState
diff --git a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
index 05aa046e87..b5e57a1567 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useRef } from 'react'
-import { Grid, List, Typography } from '@mui/material'
+import { Grid, List, Typography, useTheme } from '@mui/material'
 import {
   ContextMenuProps,
   ContextMenuHintProps,
@@ -10,9 +10,9 @@ import Icon from '../ui/Icon/Icon'
 import arrowLeft from '../../static/images/arrowLeft.svg'
 import arrowRightShort from '../../static/images/arrowRightShort.svg'
 
-import theme from '../../theme'
-
 export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handleBack, title, children }) => {
+  const theme = useTheme()
+
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -97,6 +97,8 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
 }
 
 export const ContextMenuHint: FC<ContextMenuHintProps> = ({ hint }) => {
+  const theme = useTheme()
+
   return (
     <Grid
       style={{
@@ -129,6 +131,8 @@ export const ContextMenuItemList: FC<ContextMenuItemListProps> = ({ items }) =>
 }
 
 export const ContextMenuItem: FC<ContextMenuItemProps> = ({ title, action }) => {
+  const theme = useTheme()
+
   return (
     <Grid
       style={{
diff --git a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx
index 6e9fc3f3dc..f43ba72df8 100644
--- a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx
+++ b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx
@@ -3,7 +3,6 @@ import { displayMathRegex, splitByTex } from '../../../utils/functions/splitByTe
 import { TextMessageComponent, TextMessageComponentProps } from '../widgets/channels/TextMessage'
 import { convertPromise, SourceLang } from './customMathJax'
 import { styled } from '@mui/material/styles'
-import theme from '../../theme'
 import classNames from 'classnames'
 
 const PREFIX = 'MathMessage'
@@ -15,7 +14,7 @@ const classes = {
   middle: `${PREFIX}middle`,
 }
 
-const StyledMath = styled('span')(() => ({
+const StyledMath = styled('span')(({ theme }) => ({
   [`&.${classes.message}`]: {
     marginLeft: '20px',
   },
diff --git a/packages/desktop/src/renderer/components/Titlebar.tsx b/packages/desktop/src/renderer/components/Titlebar.tsx
index da6b6caaf8..87ecc99007 100644
--- a/packages/desktop/src/renderer/components/Titlebar.tsx
+++ b/packages/desktop/src/renderer/components/Titlebar.tsx
@@ -1,5 +1,7 @@
+import { useTheme } from '@mui/material'
 import { Titlebar, Color } from 'custom-electron-titlebar'
-import theme from '../theme'
+
+import { lightTheme as theme } from '../theme'
 
 export const addTitlebar = () => {
   setTimeout(() => {
diff --git a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
index ddc6f5c1d6..87477e86c1 100644
--- a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
+++ b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { styled } from '@mui/material/styles'
+import { styled, useTheme } from '@mui/material/styles'
 
 import { AutoSizer } from 'react-virtualized'
 import { Scrollbars } from 'rc-scrollbars'
@@ -16,8 +16,6 @@ import Icon from '../Icon/Icon'
 import exclamationMark from '../../../static/images/exclamationMark.svg'
 import Modal from '../Modal/Modal'
 
-import theme from '../../../theme'
-
 const PREFIX = 'OpenlinkModal'
 
 const classes = {
@@ -104,6 +102,8 @@ export const OpenlinkModal: React.FC<OpenLinkModalProps> = ({
   const [allowAllLink, setAllowAllLink] = React.useState(false)
   const [dontAutoload, setDontAutoload] = React.useState(false)
 
+  const theme = useTheme()
+
   const uri = new URL(url)
 
   return (
diff --git a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.tsx b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.tsx
index 0bc230cfad..2059da123e 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
-import theme from '../../../theme'
 import classNames from 'classnames'
-import { Grid } from '@mui/material'
+import { Grid, useTheme } from '@mui/material'
 import { AUTODOWNLOAD_SIZE_LIMIT, DownloadState, DownloadStatus } from '@quiet/state-manager'
 
 import UploadedImage from '../../Channel/File/UploadedImage/UploadedImage'
@@ -21,7 +20,7 @@ const classes = {
   info: `${PREFIX}info`,
 }
 
-const StyledGrid = styled(Grid)(() => ({
+const StyledGrid = styled(Grid)(({ theme }) => ({
   [`& .${classes.message}`]: {
     fontSize: '0.855rem',
     whiteSpace: 'pre-line',
@@ -60,6 +59,8 @@ export const NestedMessageContent: React.FC<NestedMessageContentProps & FileActi
   downloadFile,
   cancelDownload,
 }) => {
+  const theme = useTheme()
+
   const renderMessage = () => {
     const isMalicious = downloadStatus?.downloadState === DownloadState.Malicious
 
diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
index 51ad2dcb41..ba2e1eb124 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
@@ -3,7 +3,6 @@ import classNames from 'classnames'
 import React, { ReactNode } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import theme from '../../../theme'
 import { isAllEmoji } from '../../../../../../common/src/emojis'
 
 const PREFIX = 'TextMessage'
@@ -24,7 +23,7 @@ const classes = {
   tableRowCell: `${PREFIX}tableRowCell`,
 }
 
-const StyledTypography = styled(Typography)(() => ({
+const StyledTypography = styled(Typography)(({ theme }) => ({
   [`&.${classes.message}`]: {
     fontSize: '0.855rem',
     whiteSpace: 'pre-line',
diff --git a/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
index 70f9a847e3..ce3879a7f7 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import theme from '../../../theme'
+import { lightTheme as theme } from '../../../theme'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
 import { WelcomeMessage } from './WelcomeMessage'
 import { renderComponent } from '../../../testUtils/renderComponent'
diff --git a/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx b/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
index e8677f7de2..794672545b 100644
--- a/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import theme from '../../../theme'
+import { lightTheme as theme } from '../../../theme'
 import { ThemeProvider } from '@mui/material/styles'
 import { renderComponent } from '../../../testUtils/renderComponent'
 import PossibleImpersonationAttackModalComponent from './PossibleImpersonationAttackModal.component'
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
index d8c17ce5b9..70ccaa13fc 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
+++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import UpdateModal, { UpdateModalProps } from './UpdateModalComponent'
 
 import { withTheme } from '../../../storybook/decorators'
-import theme from '../../../theme'
+import { lightTheme as theme } from '../../../theme'
 
 import Button from '@mui/material/Button'
 
diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx
index 2f2768df8b..782975336a 100644
--- a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import theme from '../../../theme'
+import { lightTheme as theme } from '../../../theme'
 import { ThemeProvider } from '@mui/material/styles'
 import { renderComponent } from '../../../testUtils/renderComponent'
 import UserLabel from './UserLabel.component'
diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
index 62e2f26f56..3ab642a415 100644
--- a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import theme from '../../../../theme'
+import { lightTheme as theme } from '../../../../theme'
 import { ThemeProvider } from '@mui/material/styles'
 import { renderComponent } from '../../../../testUtils/renderComponent'
 import DuplicateModalComponent from './DuplicateModal.component'
diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
index f6d3b47b49..3aefe0205f 100644
--- a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import theme from '../../../../theme'
+import { lightTheme as theme } from '../../../../theme'
 import { ThemeProvider } from '@mui/material/styles'
 import { renderComponent } from '../../../../testUtils/renderComponent'
 import UnregisteredModalComponent from './UnregisteredModal.component'
diff --git a/packages/desktop/src/renderer/containers/widgets/breakingChangesWarning/BreakingChangesWarning.tsx b/packages/desktop/src/renderer/containers/widgets/breakingChangesWarning/BreakingChangesWarning.tsx
index 92bf605cfd..3fa2cb67cb 100644
--- a/packages/desktop/src/renderer/containers/widgets/breakingChangesWarning/BreakingChangesWarning.tsx
+++ b/packages/desktop/src/renderer/containers/widgets/breakingChangesWarning/BreakingChangesWarning.tsx
@@ -1,16 +1,17 @@
 import React, { useCallback, useEffect } from 'react'
+import { useTheme } from '@mui/material'
 import { ModalName } from '../../../sagas/modals/modals.types'
 import { useModal } from '../../hooks'
 import UpdateModalComponent from '../../../components/widgets/update/UpdateModalComponent'
 
 import Button from '@mui/material/Button'
-import theme from '../../../theme'
 
 import { shell } from 'electron'
 import { Site } from '@quiet/common'
 
 const BreakingChangesWarning = () => {
   const modal = useModal(ModalName.breakingChangesWarning)
+  const theme = useTheme()
 
   const title = 'Update available'
   const message =
diff --git a/packages/desktop/src/renderer/containers/widgets/update/UpdateModal.tsx b/packages/desktop/src/renderer/containers/widgets/update/UpdateModal.tsx
index fd5d4897cb..11b86b13b2 100644
--- a/packages/desktop/src/renderer/containers/widgets/update/UpdateModal.tsx
+++ b/packages/desktop/src/renderer/containers/widgets/update/UpdateModal.tsx
@@ -9,7 +9,7 @@ import { ModalName } from '../../../sagas/modals/modals.types'
 import UpdateModalComponent from '../../../components/widgets/update/UpdateModalComponent'
 
 import Button from '@mui/material/Button'
-import theme from '../../../theme'
+import { useTheme } from '@mui/material'
 
 export const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
   bindActionCreators(
@@ -22,6 +22,7 @@ export const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
 
 const ApplicationUpdateModal: React.FC = () => {
   const dispatch = useDispatch()
+  const theme = useTheme()
 
   const actions = mapDispatchToProps(dispatch)
   const modal = useModal(ModalName.applicationUpdate)
diff --git a/packages/desktop/src/renderer/storybook/decorators.tsx b/packages/desktop/src/renderer/storybook/decorators.tsx
index c6cfdd7bc4..b30558c4da 100644
--- a/packages/desktop/src/renderer/storybook/decorators.tsx
+++ b/packages/desktop/src/renderer/storybook/decorators.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
 
-import theme from '../theme'
+import { lightTheme as theme } from '../theme'
 import { Store } from '../sagas/store.types'
 
 export const withStore = (store: Store) => (Story: React.FC) => (
diff --git a/packages/desktop/src/renderer/testUtils/renderComponent.tsx b/packages/desktop/src/renderer/testUtils/renderComponent.tsx
index b341fac9ff..c9293b3a50 100644
--- a/packages/desktop/src/renderer/testUtils/renderComponent.tsx
+++ b/packages/desktop/src/renderer/testUtils/renderComponent.tsx
@@ -4,7 +4,7 @@ import { Provider } from 'react-redux'
 
 import { render } from '@testing-library/react'
 
-import theme from '../theme'
+import { lightTheme as theme } from '../theme'
 import store from '../store'
 import { Store } from 'redux'
 import { DndProvider } from 'react-dnd'
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index 1bfb06938a..71bf92bb6d 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -3,7 +3,7 @@ import { createTheme } from '@mui/material/styles'
 const font = "'Rubik', sans-serif"
 const fontLogs = 'Menlo Regular'
 
-export default createTheme({
+const lightTheme = createTheme({
   typography: {
     fontFamily: [font, fontLogs].join(','),
     fontStyle: 'normal',
@@ -188,3 +188,191 @@ export default createTheme({
     },
   },
 })
+
+const darkTheme = createTheme({
+  typography: {
+    fontFamily: [font, fontLogs].join(','),
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    useNextVariants: true,
+    overline: {
+      fontSize: 10,
+      lineHeight: '16px',
+      fontWeight: 500,
+    },
+    caption: {
+      fontSize: 12,
+      lineHeight: '20px',
+      color: '#b2b2b2',
+    },
+    body1: {
+      fontSize: 16,
+      lineHeight: '26px',
+    },
+    body2: {
+      fontSize: 14,
+      lineHeight: '24px',
+    },
+    subtitle1: {
+      fontSize: 16,
+      lineHeight: '26px',
+    },
+    subtitle2: {
+      fontSize: 14,
+      lineHeight: '23px',
+    },
+    h1: {
+      fontWeight: 500,
+      fontSize: 48,
+      lineHeight: '40px',
+    },
+    h2: {
+      fontWeight: 500,
+      fontSize: 34,
+      lineHeight: '40px',
+    },
+    h3: {
+      fontWeight: 500,
+      fontSize: 28,
+      lineHeight: '34px',
+    },
+    h4: {
+      fontWeight: 500,
+      fontSize: 18,
+      lineHeight: '27px',
+    },
+    h5: {
+      fontSize: 16,
+      lineHeight: '26px',
+      fontWeight: 500,
+    },
+  },
+  palette: {
+    background: {
+      // Background colors (white-ish for light theme, black-ish for dark)
+      default: '#ffffff',
+      paper: '#F0F0F0',
+    },
+    // text: {}, // font colors (black-ish for light theme, white-ish for dark)
+    primary: {
+      // Primary Quiet brand purple
+      main: '#521C74',
+      dark: '#461863',
+    },
+    secondary: {
+      // Secondary Quiet brand red (TODO: Make sure this is Secondary, not error/warning)
+      main: '#E42656',
+      dark: '#C41743',
+    },
+    error: {
+      main: '#D13135',
+    },
+    warning: {
+      main: '#FFCC00',
+    },
+    // TO BE ADDED IF NEEDED: Success, Warning, Neutral
+    colors: {
+      // Misc colors. For primary / secondary brand, text, and background colors, use those objects
+      // For canonical colors, see: https://www.figma.com/file/0j7Nna9zWmfOSNmRmQK1Uh/Quiet-Design-Library?type=design&node-id=2667-0&mode=design&t=i0cXovHohRKxWGaA-0
+      // Blues
+      blue: '#2196f3',
+      purple: '#521C74', // To be replaced with theme.palette.primary.main
+      quietBlue: '#521c74', // To be replaced with theme.palette.primary.main
+      darkPurple: '#4d1a6d', // To be replaced with theme.palette.primary.dark?
+      lushSky: '#67BFD3',
+      lushSky12: '#EDF7FA',
+      linkBlue: '#59c0d5', // Used in a variety of places - likely wants to be split / consolidated
+      // Reds
+      red: '#FF0000', // Replace with D13135 ?
+      hotRed: '#E42656', // Replaced by theme.palette.secondary.main?
+      hotPink: '#E42656', // Replaced by theme.palette.secondary.main?
+      // Grays (including white and black)
+      white: '#FFFFFF',
+      trueBlack: '#000000', // To be replaced with text color and border color
+      gray: '#e7e7e7',
+      darkGray: '#7F7F7F',
+      mediumGray: '#8d8d8d',
+      lightGray: '#B2B2B2', // To be replaced with gray30?
+      gray03: '#F7F7F7',
+      gray30: '#FAFAFA', // Unused and not aligned with Figma
+      gray40: '#999999',
+      gray50: '#7F7F7F',
+      gray70: '#4C4C4C',
+      // Border colors
+      border01: '#F0F0F0',
+      border02: '#B3B3B3',
+      border03: '#D2D2D2',
+    },
+  },
+  //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
+  shadows: [
+    'none',
+    '0px 0px 4px rgba(0, 0, 0, 0.25)',
+    '0px 1px 0px #F0F0F0',
+    '0px 1px 3px rgba(0, 0, 0, 0.0)',
+    '0px 2px 25px rgba(0, 0, 0, 0.2)',
+  ],
+  components: {
+    // Body font size changed in mui v5: https://mui.com/material-ui/migration/v5-component-changes/#update-body-font-size
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          fontSize: '14px',
+          lineHeight: '24px',
+          letterSpacing: '0.01071em',
+        },
+      },
+    },
+    MuiSnackbarContent: {
+      // Replace with atomic Snackbar component. Put styling in that file.
+      styleOverrides: {
+        root: {
+          wordBreak: 'break-all',
+        },
+      },
+    },
+    MuiButton: {
+      // Replace with atomic Button component. Put styling in that file.
+      styleOverrides: {
+        sizeSmall: {
+          textTransform: 'none',
+          boxShadow: 'none',
+          paddingLeft: '16px',
+          paddingRight: '14px',
+          fontWeight: 400,
+          fontSize: '14px',
+          '&:active': {
+            boxShadow: 'none',
+          },
+        },
+        sizeLarge: {
+          textTransform: 'none',
+          boxShadow: 'none',
+          fontWeight: 400,
+          paddingTop: 12,
+          paddingBottom: 12,
+          fontSize: 14,
+          '&:active': {
+            boxShadow: 'none',
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      // Replace with atomic Input component. Put styling in that file.
+      styleOverrides: {
+        input: {},
+      },
+    },
+    MuiPopover: {
+      // Replace with atomic Popover component. Put styling in that file.
+      styleOverrides: {
+        paper: {
+          borderRadius: 8,
+        },
+      },
+    },
+  },
+})
+
+export { lightTheme, darkTheme }

From 84bf50a3e4018530e077b04f1d63c4202792dd50 Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Fri, 10 May 2024 21:11:35 -0400
Subject: [PATCH 02/12] feat: #1502 Implement dark mode, tidy up loose styles
 and unused classes.

---
 packages/desktop/src/renderer/Root.tsx        |  2 +-
 .../components/Settings/SettingsComponent.tsx |  2 --
 .../renderer/components/ui/Modal/Modal.tsx    |  1 -
 .../widgets/channels/ChannelHeader.tsx        |  5 ----
 .../channels/ChannelInput/ChannelInput.tsx    |  4 ----
 .../widgets/channels/ChannelMessages.tsx      |  6 -----
 packages/desktop/src/renderer/theme.ts        | 24 +++++++++++++------
 7 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx
index b9bd2b9e9a..c7e5b0aebd 100644
--- a/packages/desktop/src/renderer/Root.tsx
+++ b/packages/desktop/src/renderer/Root.tsx
@@ -43,7 +43,7 @@ export const persistor = persistStore(store)
 export default () => {
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={lightTheme}>
+      <ThemeProvider theme={darkTheme}>
         <DndProvider backend={HTML5Backend}>
           <HashRouter>
             <Provider store={store}>
diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
index 04e09ff3be..88e6523349 100644
--- a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
+++ b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
@@ -48,8 +48,6 @@ const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({
 }))
 
 const StyledTabs = styled(Tabs)(({ theme }) => ({
-  color: theme.palette.colors.trueBlack,
-
   [`& .${classes.indicator}`]: {
     height: '0 !important',
   },
diff --git a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
index 3ff750b5d5..8f9af1b641 100644
--- a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
+++ b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
@@ -60,7 +60,6 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde
 
   [`& .${classes.title}`]: {
     fontSize: 15,
-    color: theme.palette.colors.trueBlack,
     lineHeight: '18px',
     fontStyle: 'normal',
     fontWeight: 'normal',
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
index cc3b03e414..fa972ee9fb 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
@@ -79,11 +79,6 @@ const Root = styled('div')(({ theme }) => ({
     minHeight: 0,
   },
 
-  [`& .${classes.selected}`]: {
-    color: theme.palette.colors.trueBlack,
-    backgroundColor: theme.palette.colors.white,
-  },
-
   [`& .${classes.indicator}`]: {
     maxHeight: 0,
   },
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
index 88dbcbb14c..9514b4c084 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
@@ -33,7 +33,6 @@ const classes = {
   actions: `${PREFIX}actions`,
   picker: `${PREFIX}picker`,
   errorIcon: `${PREFIX}errorIcon`,
-  errorText: `${PREFIX}errorText`,
   errorBox: `${PREFIX}errorBox`,
   linkBlue: `${PREFIX}linkBlue`,
   notAllowed: `${PREFIX}notAllowed`,
@@ -175,9 +174,6 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     marginLeft: 20,
     marginRight: 5,
   },
-  [`& .${classes.errorText}`]: {
-    color: theme.palette.colors.trueBlack,
-  },
   [`& .${classes.errorBox}`]: {
     marginTop: 5,
   },
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
index 5445b7170d..b8624215e1 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
@@ -22,7 +22,6 @@ const classes = {
   scroll: `${PREFIX}scroll`,
   list: `${PREFIX}list`,
   link: `${PREFIX}link`,
-  info: `${PREFIX}info`,
   item: `${PREFIX}item`,
   bold: `${PREFIX}bold`,
 }
@@ -51,11 +50,6 @@ const Root = styled('div')(({ theme }) => ({
     cursor: 'pointer',
   },
 
-  [`& .${classes.info}`]: {
-    color: theme.palette.colors.trueBlack,
-    letterSpacing: '0.4px',
-  },
-
   [`& .${classes.item}`]: {
     backgroundColor: theme.palette.colors.gray03,
     padding: '9px 16px',
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index 71bf92bb6d..3e3d8aa109 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -116,6 +116,8 @@ const lightTheme = createTheme({
       border01: '#F0F0F0',
       border02: '#B3B3B3',
       border03: '#D2D2D2',
+      //Gradients and other fancy things
+      sidebarBackground: 'linear-gradient(290.29deg, #521576 18.61%, #E42656 96.07%)',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
@@ -203,7 +205,6 @@ const darkTheme = createTheme({
     caption: {
       fontSize: 12,
       lineHeight: '20px',
-      color: '#b2b2b2',
     },
     body1: {
       fontSize: 16,
@@ -246,12 +247,19 @@ const darkTheme = createTheme({
       lineHeight: '26px',
       fontWeight: 500,
     },
+    h6: {
+      fontSize: 16,
+      lineHeight: '26px',
+      fontWeight: 500,
+      color: '#fff',
+    },
   },
   palette: {
+    mode: 'dark',
     background: {
       // Background colors (white-ish for light theme, black-ish for dark)
-      default: '#ffffff',
-      paper: '#F0F0F0',
+      default: '#151515',
+      paper: '#222222',
     },
     // text: {}, // font colors (black-ish for light theme, white-ish for dark)
     primary: {
@@ -302,15 +310,17 @@ const darkTheme = createTheme({
       border01: '#F0F0F0',
       border02: '#B3B3B3',
       border03: '#D2D2D2',
+      // Gradients and other run-of-the-mill things
+      sidebarBackground: 'linear-gradient(290.29deg, #1f092c 18.61%, #03081c 96.07%)',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
   shadows: [
     'none',
-    '0px 0px 4px rgba(0, 0, 0, 0.25)',
-    '0px 1px 0px #F0F0F0',
-    '0px 1px 3px rgba(0, 0, 0, 0.0)',
-    '0px 2px 25px rgba(0, 0, 0, 0.2)',
+    '0px 0px 4px rgba(1, 1, 1, 0.25)',
+    '0px 1px 0px #0F0F0F',
+    '0px 1px 3px rgba(1, 1, 1, 0.0)',
+    '0px 2px 25px rgba(1, 1, 1, 0.2)',
   ],
   components: {
     // Body font size changed in mui v5: https://mui.com/material-ui/migration/v5-component-changes/#update-body-font-size

From 1a3ad45628c2a519c4f730d16b17f079293cce1d Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Fri, 10 May 2024 21:35:57 -0400
Subject: [PATCH 03/12] feat: darkmode #1502 update CHANGELOG

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e89ca1cb2..c2f96e7938 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,13 +2,16 @@
 
 # New features:
 
+* Add dark mode to the desktop UI ([#1502](https://github.com/TryQuiet/quiet/issues/1502))
 * Add support for new format of invitation link: `c=<cid>&t=<token>&s=<serverAddress>&i=<inviterAddress>` ([#2310](https://github.com/TryQuiet/quiet/issues/2310))
 * Use server for downloading initial community metadata if v2 invitation link is detected ([#2295](https://github.com/TryQuiet/quiet/issues/2295))
 
 # Refactorings:
+
 * Consolidate colors and align theme with MUI standards ([#2445](https://github.com/TryQuiet/quiet/issues/2445))
 
 # Fixes:
+
 * Disable spellCheck/autoCorrect on non-spelling sensitive fields like usernames and channels ([#373](https://github.com/TryQuiet/quiet/issues/373))
 * Fixes issue with reconnecting to peers on resume on iOS ([#2424](https://github.com/TryQuiet/quiet/issues/2424))
 

From ecd239add006bca03519bb8d79ef1bc05db42928 Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Fri, 10 May 2024 21:52:31 -0400
Subject: [PATCH 04/12] feat: #1502 respect browser night-mode, fix sidebar and
 message highlight colors

---
 .../src/renderer/components/Sidebar/SidebarComponent.tsx     | 2 +-
 .../renderer/components/widgets/channels/BasicMessage.tsx    | 2 +-
 packages/desktop/src/renderer/index.html                     | 5 +++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx b/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
index cb9dd6f1a3..f7c62c9161 100644
--- a/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
+++ b/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
@@ -25,7 +25,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     minHeight: '100%',
     width: '220px',
     position: 'relative',
-    backgroundImage: 'linear-gradient(290.29deg, #521576 18.61%, #E42656 96.07%)',
+    backgroundImage: theme.palette.colors.sidebarBackground,
     color: theme.palette.colors.white,
   },
 
diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
index 1a43ad6625..d6fbf4b0d6 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
@@ -54,7 +54,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
   [`&.${classes.wrapper}`]: {
     backgroundColor: theme.palette.background.default,
     '&:hover': {
-      backgroundColor: theme.palette.colors.gray03,
+      backgroundColor: theme.palette.background.paper,
     },
   },
 
diff --git a/packages/desktop/src/renderer/index.html b/packages/desktop/src/renderer/index.html
index 6836dc8e64..e5fce0c849 100644
--- a/packages/desktop/src/renderer/index.html
+++ b/packages/desktop/src/renderer/index.html
@@ -13,6 +13,11 @@
     <link rel="preload" href="iJWHBXyIfDnIV7EyjmmT8WDm7Q.woff2" as="font" type="font/woff2">
     <link rel="preload" href="iJWHBXyIfDnIV7Eyjmmd8WA.woff2" as="font" type="font/woff2">
     <style>
+      @media (prefers-color-scheme: dark) {
+        :root {
+          color-scheme: dark;
+        }
+      }
       @font-face {
         font-family: 'Menlo Regular';
         font-style: normal;

From 17c1c67d829e5b78b169e3515095e95dabf595c0 Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Fri, 10 May 2024 22:00:05 -0400
Subject: [PATCH 05/12] feat: #1502 Let's do the Emoji picker too!

---
 .../widgets/channels/ChannelInput/ChannelInput.tsx         | 7 +++++--
 packages/desktop/src/renderer/theme.ts                     | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
index 9514b4c084..895fded0e8 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
@@ -1,8 +1,8 @@
 import React, { ReactElement, useCallback } from 'react'
 import classNames from 'classnames'
-import Picker, { EmojiStyle } from 'emoji-picker-react'
+import Picker, { EmojiStyle, type Theme } from 'emoji-picker-react'
 import Grid from '@mui/material/Grid'
-import { styled } from '@mui/material/styles'
+import { styled, useTheme } from '@mui/material/styles'
 import orange from '@mui/material/colors/orange'
 import ClickAwayListener from '@mui/material/ClickAwayListener'
 import ChannelInputInfoMessage from './ChannelInputInfoMessage'
@@ -245,6 +245,8 @@ export const ChannelInputComponent: React.FC<ChannelInputProps> = ({
 
   const [message, setMessage] = React.useState(initialMessage)
 
+  const theme = useTheme()
+
   React.useEffect(() => {
     setMessage(initialMessage)
     const ref = textAreaRef.current
@@ -436,6 +438,7 @@ export const ChannelInputComponent: React.FC<ChannelInputProps> = ({
                           // Every other emojiStyle causes downloading emojis from cdn. We do not want that.
                           // Do not change it unless using custom getEmojiUrl with local emojis.
                           emojiStyle={EmojiStyle.NATIVE}
+                          theme={theme.palette.mode as Theme}
                         />
                       </div>
                     </ClickAwayListener>
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index 3e3d8aa109..b51043cdbc 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -62,6 +62,7 @@ const lightTheme = createTheme({
     },
   },
   palette: {
+    mode: 'light',
     background: {
       // Background colors (white-ish for light theme, black-ish for dark)
       default: '#ffffff',

From 4d8074674e324389a747d5a864b0efe96c282ee6 Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Mon, 13 May 2024 12:54:01 -0400
Subject: [PATCH 06/12] feat: #1502 get light/dark from native theme and access
 it through DRY function

---
 packages/desktop/src/renderer/Root.tsx                   | 4 ++--
 packages/desktop/src/renderer/components/Titlebar.tsx    | 3 ++-
 .../components/widgets/channels/WelcomeMessage.test.tsx  | 4 +++-
 .../PossibleImpersonationAttackModal.test.tsx            | 4 +++-
 .../widgets/update/UpdateModalComponent.stories.tsx      | 4 +++-
 .../components/widgets/userLabel/UserLabel.test.tsx      | 4 +++-
 .../widgets/userLabel/duplicate/DuplicateModal.test.tsx  | 4 +++-
 .../userLabel/unregistered/UnregisteredModal.test.tsx    | 4 +++-
 packages/desktop/src/renderer/storybook/decorators.tsx   | 4 +++-
 .../desktop/src/renderer/testUtils/renderComponent.tsx   | 4 +++-
 packages/desktop/src/renderer/theme.ts                   | 9 +++++++--
 11 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx
index c7e5b0aebd..09999d1e23 100644
--- a/packages/desktop/src/renderer/Root.tsx
+++ b/packages/desktop/src/renderer/Root.tsx
@@ -14,7 +14,7 @@ import SentryWarning from './containers/widgets/sentryWarning/sentryWarning'
 import SettingsModal from './components/Settings/Settings'
 import UpdateModal from './containers/widgets/update/UpdateModal'
 import QuitAppDialog from './containers/ui/QuitAppDialog'
-import { lightTheme, darkTheme } from './theme'
+import { getTheme } from './theme'
 import CreateCommunity from './components/CreateJoinCommunity/CreateCommunity/CreateCommunity'
 import JoinCommunity from './components/CreateJoinCommunity/JoinCommunity/JoinCommunity'
 import CreateChannel from './components/Channel/CreateChannel/CreateChannel'
@@ -43,7 +43,7 @@ export const persistor = persistStore(store)
 export default () => {
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={darkTheme}>
+      <ThemeProvider theme={getTheme()}>
         <DndProvider backend={HTML5Backend}>
           <HashRouter>
             <Provider store={store}>
diff --git a/packages/desktop/src/renderer/components/Titlebar.tsx b/packages/desktop/src/renderer/components/Titlebar.tsx
index 87ecc99007..a1f99b52b6 100644
--- a/packages/desktop/src/renderer/components/Titlebar.tsx
+++ b/packages/desktop/src/renderer/components/Titlebar.tsx
@@ -1,9 +1,10 @@
 import { useTheme } from '@mui/material'
 import { Titlebar, Color } from 'custom-electron-titlebar'
 
-import { lightTheme as theme } from '../theme'
+import { getTheme } from '../theme'
 
 export const addTitlebar = () => {
+  const theme = getTheme()
   setTimeout(() => {
     // eslint-disable-next-line
     const titlebar = new Titlebar({
diff --git a/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
index ce3879a7f7..7253efc34a 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
-import { lightTheme as theme } from '../../../theme'
+import { getTheme } from '../../../theme'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
 import { WelcomeMessage } from './WelcomeMessage'
 import { renderComponent } from '../../../testUtils/renderComponent'
 
 describe('WelcomeMessage', () => {
   it('renders component', () => {
+    const theme = getTheme()
+
     const result = renderComponent(
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
diff --git a/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx b/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
index 794672545b..67b18ff4f7 100644
--- a/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
-import { lightTheme as theme } from '../../../theme'
+import { getTheme } from '../../../theme'
 import { ThemeProvider } from '@mui/material/styles'
 import { renderComponent } from '../../../testUtils/renderComponent'
 import PossibleImpersonationAttackModalComponent from './PossibleImpersonationAttackModal.component'
 
 describe('PossibleImpersonationAttackModal', () => {
   it('renderComponent', () => {
+    const theme = getTheme()
+
     const result = renderComponent(
       <ThemeProvider theme={theme}>
         <PossibleImpersonationAttackModalComponent handleClose={() => {}} open={true} communityName={'devteam'} />
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
index 70ccaa13fc..a7372b7359 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
+++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
@@ -4,10 +4,12 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import UpdateModal, { UpdateModalProps } from './UpdateModalComponent'
 
 import { withTheme } from '../../../storybook/decorators'
-import { lightTheme as theme } from '../../../theme'
+import { getTheme } from '../../../theme'
 
 import Button from '@mui/material/Button'
 
+const theme = getTheme()
+
 const Template: ComponentStory<typeof UpdateModal> = args => {
   return <UpdateModal {...args} />
 }
diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx
index 782975336a..74eebc9dd0 100644
--- a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
-import { lightTheme as theme } from '../../../theme'
+import { getTheme } from '../../../theme'
 import { ThemeProvider } from '@mui/material/styles'
 import { renderComponent } from '../../../testUtils/renderComponent'
 import UserLabel from './UserLabel.component'
 import { payloadDuplicated, payloadUnregistered, UserLabelType } from './UserLabel.types'
 
+const theme = getTheme()
+
 describe('UserLabel', () => {
   it('duplicate', () => {
     const result = renderComponent(
diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
index 3ab642a415..094283422f 100644
--- a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
-import { lightTheme as theme } from '../../../../theme'
+import { getTheme } from '../../../../theme'
 import { ThemeProvider } from '@mui/material/styles'
 import { renderComponent } from '../../../../testUtils/renderComponent'
 import DuplicateModalComponent from './DuplicateModal.component'
 
+const theme = getTheme()
+
 describe('DuplicateModalComponent', () => {
   it('renderComponent', () => {
     const result = renderComponent(
diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
index 3aefe0205f..b6d72564ff 100644
--- a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
-import { lightTheme as theme } from '../../../../theme'
+import { getTheme } from '../../../../theme'
 import { ThemeProvider } from '@mui/material/styles'
 import { renderComponent } from '../../../../testUtils/renderComponent'
 import UnregisteredModalComponent from './UnregisteredModal.component'
 
+const theme = getTheme()
+
 describe('UnregisteredModalComponent', () => {
   it('renderComponent', () => {
     const result = renderComponent(
diff --git a/packages/desktop/src/renderer/storybook/decorators.tsx b/packages/desktop/src/renderer/storybook/decorators.tsx
index b30558c4da..c4bc354fff 100644
--- a/packages/desktop/src/renderer/storybook/decorators.tsx
+++ b/packages/desktop/src/renderer/storybook/decorators.tsx
@@ -2,9 +2,11 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
 
-import { lightTheme as theme } from '../theme'
+import { getTheme } from '../theme'
 import { Store } from '../sagas/store.types'
 
+const theme = getTheme()
+
 export const withStore = (store: Store) => (Story: React.FC) => (
   <Provider store={store}>
     <Story />
diff --git a/packages/desktop/src/renderer/testUtils/renderComponent.tsx b/packages/desktop/src/renderer/testUtils/renderComponent.tsx
index c9293b3a50..70c242675c 100644
--- a/packages/desktop/src/renderer/testUtils/renderComponent.tsx
+++ b/packages/desktop/src/renderer/testUtils/renderComponent.tsx
@@ -4,12 +4,14 @@ import { Provider } from 'react-redux'
 
 import { render } from '@testing-library/react'
 
-import { lightTheme as theme } from '../theme'
+import { getTheme } from '../theme'
 import store from '../store'
 import { Store } from 'redux'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 
+const theme = getTheme()
+
 interface Props {
   children?: React.ReactNode
 }
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index b51043cdbc..774136685f 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -1,4 +1,5 @@
-import { createTheme } from '@mui/material/styles'
+import { nativeTheme } from '@electron/remote'
+import { createTheme, type Theme } from '@mui/material/styles'
 
 const font = "'Rubik', sans-serif"
 const fontLogs = 'Menlo Regular'
@@ -386,4 +387,8 @@ const darkTheme = createTheme({
   },
 })
 
-export { lightTheme, darkTheme }
+const getTheme = (): Theme => {
+  return nativeTheme?.shouldUseDarkColors ? darkTheme : lightTheme
+}
+
+export { lightTheme, darkTheme, getTheme }

From 1fb396900adcc1a1c27d671ace7e0be8cf50c55b Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Tue, 14 May 2024 12:25:22 -0400
Subject: [PATCH 07/12] feat: #1502 make backgrounds on channel input and
 settings tabs the default

---
 .../src/renderer/components/Settings/SettingsComponent.tsx | 1 +
 .../widgets/channels/ChannelInput/ChannelInput.tsx         | 7 +------
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
index 88e6523349..b87b813da7 100644
--- a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
+++ b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
@@ -32,6 +32,7 @@ const StyledTabsWrapper = styled(Grid)(() => ({
 
 const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
+  backgroundImage: 'none',
   boxShadow: theme.shadows[3],
 
   [`& .${classes.leaveComunity}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
index 895fded0e8..0442935899 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
@@ -70,6 +70,7 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     scrollPaddingBottom: '12px',
     height: '48px',
     lineHeight: '24px',
+    backgroundColor: theme.palette.background.default,
     '&:empty': {
       '&:before': {
         content: 'attr(placeholder)',
@@ -89,9 +90,6 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     maxHeight: maxHeight,
     overflowY: 'auto',
     borderRadius: 4,
-    '&:hover': {
-      borderColor: theme.palette.colors.trueBlack,
-    },
     display: 'flex',
     flexDirection: 'column',
     flexWrap: 'nowrap',
@@ -128,9 +126,6 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     pointerEvents: 'none',
     touchAction: 'none',
   },
-  [`& .${classes.focused}`]: {
-    borderColor: theme.palette.colors.trueBlack,
-  },
   [`& .${classes.iconButton}`]: {
     cursor: 'pointer',
     position: 'relative',

From d3fabeb3ed8d08e6d3d1eafc308be806a2181159 Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Tue, 14 May 2024 12:48:28 -0400
Subject: [PATCH 08/12] feat: #1502 Tweak more backgrounds in sidebar,
 Jdenticons, etc.

---
 .../menus/UserProfileContextMenu.container.tsx     | 14 ++++++++------
 .../components/Sidebar/SidebarComponent.tsx        |  2 +-
 .../Sidebar/UserProfilePanel/UserProfilePanel.tsx  |  6 ++++--
 .../desktop/src/renderer/components/ui/Tab/Tab.tsx |  2 +-
 packages/desktop/src/renderer/theme.ts             |  4 ++--
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
index 31ab730701..56898401fa 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
@@ -2,7 +2,7 @@ import React, { FC, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { AutoSizer } from 'react-virtualized'
 import { Scrollbars } from 'rc-scrollbars'
-import { styled, Grid, List, Typography } from '@mui/material'
+import { styled, Grid, List, Typography, useTheme } from '@mui/material'
 
 import { identity, users } from '@quiet/state-manager'
 
@@ -58,7 +58,6 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
   },
 
   [`& .${classes.editUsernameFieldLabel}`]: {
-    color: '#4C4C4C',
     margin: '0px 16px 8px 16px',
     fontSize: '14px',
     fontWeight: '400',
@@ -66,7 +65,6 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
   },
 
   [`& .${classes.editUsernameField}`]: {
-    color: '#33333380',
     background: theme.palette.background.paper,
     margin: '0px 16px',
     padding: '16px',
@@ -88,7 +86,7 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
     fontFamily: 'Rubik, sans-serif',
     cursor: 'pointer',
     '&:hover': {
-      backgroundColor: '#B3B3B31A',
+      backgroundColor: theme.palette.background.paper,
     },
   },
 }))
@@ -160,6 +158,8 @@ export const UserProfileMenuProfileView: FC<UserProfileMenuProfileViewProps> = (
   const scrollbarRef = useRef(null)
   const [offset, setOffset] = useState(0)
 
+  const theme = useTheme()
+
   const adjustOffset = () => {
     if (!contentRef?.clientWidth) return
     if (contentRef.clientWidth > 800) {
@@ -209,7 +209,7 @@ export const UserProfileMenuProfileView: FC<UserProfileMenuProfileViewProps> = (
                           style={{
                             width: '96px',
                             height: '96px',
-                            background: '#F3F0F6',
+                            background: theme.palette.background.paper,
                             borderRadius: '8px',
                             marginBottom: '16px',
                           }}
@@ -315,6 +315,8 @@ export const UserProfileMenuEditView: FC<UserProfileMenuEditViewProps> = ({
   const scrollbarRef = useRef(null)
   const [offset, setOffset] = useState(0)
 
+  const theme = useTheme()
+
   const adjustOffset = () => {
     if (!contentRef?.clientWidth) return
     if (contentRef.clientWidth > 800) {
@@ -418,7 +420,7 @@ export const UserProfileMenuEditView: FC<UserProfileMenuEditViewProps> = ({
                           style={{
                             width: '96px',
                             height: '96px',
-                            background: '#F3F0F6',
+                            background: theme.palette.background.paper,
                             borderRadius: '8px',
                             marginBottom: '16px',
                           }}
diff --git a/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx b/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
index f7c62c9161..af83eb7e89 100644
--- a/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
+++ b/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
@@ -25,7 +25,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     minHeight: '100%',
     width: '220px',
     position: 'relative',
-    backgroundImage: theme.palette.colors.sidebarBackground,
+    backgroundColor: theme.palette.colors.sidebarBackground,
     color: theme.palette.colors.white,
   },
 
diff --git a/packages/desktop/src/renderer/components/Sidebar/UserProfilePanel/UserProfilePanel.tsx b/packages/desktop/src/renderer/components/Sidebar/UserProfilePanel/UserProfilePanel.tsx
index 87da257f2a..7e843f2b1f 100644
--- a/packages/desktop/src/renderer/components/Sidebar/UserProfilePanel/UserProfilePanel.tsx
+++ b/packages/desktop/src/renderer/components/Sidebar/UserProfilePanel/UserProfilePanel.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
-import { Button } from '@mui/material'
+import { Button, useTheme } from '@mui/material'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 
@@ -69,6 +69,8 @@ export const UserProfilePanel: React.FC<UserProfilePanelProps> = ({
   userProfile,
   userProfileContextMenu,
 }) => {
+  const theme = useTheme()
+
   const username = currentIdentity?.nickname || ''
   return (
     <UserProfilePanelButtonStyled>
@@ -90,7 +92,7 @@ export const UserProfilePanel: React.FC<UserProfilePanelProps> = ({
             style={{
               width: '24px',
               height: '24px',
-              background: '#F3F0F6',
+              background: theme.palette.background.paper,
               borderRadius: '4px',
               marginRight: '8px',
             }}
diff --git a/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx b/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
index c148b94fda..cd1870329b 100644
--- a/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
+++ b/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
@@ -23,7 +23,7 @@ const StyledMuiTab = styled(MuiTab)(({ theme }) => ({
   },
 
   [`&.${classes.selected}`]: {
-    backgroundColor: theme.palette.colors.lushSky,
+    backgroundColor: theme.palette.background.paper,
     borderRadius: 5,
     color: `${theme.palette.colors.white} !important`,
   },
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index 774136685f..87ac6f0827 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -119,7 +119,7 @@ const lightTheme = createTheme({
       border02: '#B3B3B3',
       border03: '#D2D2D2',
       //Gradients and other fancy things
-      sidebarBackground: 'linear-gradient(290.29deg, #521576 18.61%, #E42656 96.07%)',
+      sidebarBackground: '#711FA5',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
@@ -313,7 +313,7 @@ const darkTheme = createTheme({
       border02: '#B3B3B3',
       border03: '#D2D2D2',
       // Gradients and other run-of-the-mill things
-      sidebarBackground: 'linear-gradient(290.29deg, #1f092c 18.61%, #03081c 96.07%)',
+      sidebarBackground: '#2F193D',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820

From 1a1ce116348acc341c327a5819fb6517c68c72a5 Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Tue, 14 May 2024 13:06:21 -0400
Subject: [PATCH 09/12] feat: #1502 Replace hard-coded icons that weren't
 visible in dark mode

---
 .../components/ContextMenu/ContextMenu.component.tsx     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
index b5e57a1567..3bb73fd070 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
@@ -6,9 +6,8 @@ import {
   ContextMenuItemListProps,
   ContextMenuItemProps,
 } from './ContextMenu.types'
-import Icon from '../ui/Icon/Icon'
-import arrowLeft from '../../static/images/arrowLeft.svg'
-import arrowRightShort from '../../static/images/arrowRightShort.svg'
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
+import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 
 export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handleBack, title, children }) => {
   const theme = useTheme()
@@ -81,7 +80,7 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
             data-testid={`contextMenu-${title.split(' ').join('')}-backArrow`}
             onClick={handleBack || handleClose}
           >
-            <Icon src={arrowLeft} />
+            <NavigateBeforeIcon />
           </Grid>
           <Grid style={{ flex: 5, justifyContent: 'center' }}>
             <Typography fontSize={16} fontWeight={'medium'} style={{ alignSelf: 'center' }}>
@@ -157,7 +156,7 @@ export const ContextMenuItem: FC<ContextMenuItemProps> = ({ title, action }) =>
         </Typography>
       </Grid>
       <Grid style={{ flex: 1, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
-        <Icon src={arrowRightShort} />
+        <NavigateNextIcon />
       </Grid>
     </Grid>
   )

From cf106e08ae5b32d75b794b656fddc7e1fe1652ff Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Tue, 14 May 2024 13:31:23 -0400
Subject: [PATCH 10/12] feat: #1502 Remove hardcoded color and ensure contrast
 in tabs, more icon replacement

---
 .../renderer/components/Settings/SettingsComponent.tsx    | 1 +
 .../components/Sidebar/ChannelsPanel/ChannelsListItem.tsx | 8 ++++----
 packages/desktop/src/renderer/components/ui/Tab/Tab.tsx   | 1 -
 .../components/widgets/channels/ChannelHeader.tsx         | 6 ++----
 packages/desktop/src/renderer/theme.ts                    | 4 +++-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
index b87b813da7..1941efe9a4 100644
--- a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
+++ b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
@@ -31,6 +31,7 @@ const StyledTabsWrapper = styled(Grid)(() => ({
 }))
 
 const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({
+  color: theme.palette.colors.contrastText,
   backgroundColor: theme.palette.background.default,
   backgroundImage: 'none',
   boxShadow: theme.shadows[3],
diff --git a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx b/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
index a70902b9ce..15fec6a6e5 100644
--- a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
+++ b/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
@@ -25,10 +25,10 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
   },
 
   [`&.${classes.selected}`]: {
-    backgroundColor: theme.palette.colors.lushSky,
-    '&:hover': {
-      backgroundColor: theme.palette.colors.lushSky,
-    },
+    color: theme.palette.colors.contrastText,
+    backgroundColor: theme.palette.background.default,
+    borderTop: `1px solid ${theme.palette.colors.border03}`,
+    borderBottom: `1px solid ${theme.palette.colors.border03}`,
   },
 
   [`& .${classes.primary}`]: {
diff --git a/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx b/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
index cd1870329b..27753827ba 100644
--- a/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
+++ b/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
@@ -25,7 +25,6 @@ const StyledMuiTab = styled(MuiTab)(({ theme }) => ({
   [`&.${classes.selected}`]: {
     backgroundColor: theme.palette.background.paper,
     borderRadius: 5,
-    color: `${theme.palette.colors.white} !important`,
   },
 }))
 
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
index fa972ee9fb..2c0479a106 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
@@ -6,9 +6,7 @@ import { styled } from '@mui/material/styles'
 
 import Typography from '@mui/material/Typography'
 import Grid from '@mui/material/Grid'
-
-import Icon from '../../ui/Icon/Icon'
-import dots from '../../../static/images/dots.svg'
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
 
 const PREFIX = 'ChannelHeaderComponent'
 
@@ -182,7 +180,7 @@ export const ChannelHeaderComponent: React.FC<ChannelHeaderProps> = ({
         >
           {enableContextMenu && (
             <Grid item className={classes.menu} onClick={openContextMenu} data-testid={'channelContextMenuButton'}>
-              <Icon src={dots} />
+              <MoreHorizIcon />
             </Grid>
           )}
         </Grid>
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index 87ac6f0827..e62b360b8e 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -90,6 +90,7 @@ const lightTheme = createTheme({
     colors: {
       // Misc colors. For primary / secondary brand, text, and background colors, use those objects
       // For canonical colors, see: https://www.figma.com/file/0j7Nna9zWmfOSNmRmQK1Uh/Quiet-Design-Library?type=design&node-id=2667-0&mode=design&t=i0cXovHohRKxWGaA-0
+      contrastText: '#000', // Contrasts with the background colors
       // Blues
       blue: '#2196f3',
       purple: '#521C74', // To be replaced with theme.palette.primary.main
@@ -118,7 +119,7 @@ const lightTheme = createTheme({
       border01: '#F0F0F0',
       border02: '#B3B3B3',
       border03: '#D2D2D2',
-      //Gradients and other fancy things
+      // Other custom colors
       sidebarBackground: '#711FA5',
     },
   },
@@ -284,6 +285,7 @@ const darkTheme = createTheme({
     colors: {
       // Misc colors. For primary / secondary brand, text, and background colors, use those objects
       // For canonical colors, see: https://www.figma.com/file/0j7Nna9zWmfOSNmRmQK1Uh/Quiet-Design-Library?type=design&node-id=2667-0&mode=design&t=i0cXovHohRKxWGaA-0
+      contrastText: '#FFF', // Contrasts with the background colors
       // Blues
       blue: '#2196f3',
       purple: '#521C74', // To be replaced with theme.palette.primary.main

From 663afcd42976f161392e768032a605a7fb342a6d Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Tue, 14 May 2024 14:59:22 -0400
Subject: [PATCH 11/12] feat: #1502 tweak light-mode sidebar background

---
 packages/desktop/src/renderer/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index e62b360b8e..2f74612305 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -120,7 +120,7 @@ const lightTheme = createTheme({
       border02: '#B3B3B3',
       border03: '#D2D2D2',
       // Other custom colors
-      sidebarBackground: '#711FA5',
+      sidebarBackground: '#511974',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820

From 3d508086e778a61bdeefbd3417acad5220572562 Mon Sep 17 00:00:00 2001
From: Mike Kiss <mike.a.kissinger@gmail.com>
Date: Thu, 16 May 2024 15:19:45 -0400
Subject: [PATCH 12/12] feat: #1502 update sidebar's selected item background
 to match Figmas

---
 .../components/Sidebar/ChannelsPanel/ChannelsListItem.tsx     | 4 +---
 packages/desktop/src/renderer/theme.ts                        | 4 +++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx b/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
index 15fec6a6e5..9a4b95b2e9 100644
--- a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
+++ b/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
@@ -26,9 +26,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
 
   [`&.${classes.selected}`]: {
     color: theme.palette.colors.contrastText,
-    backgroundColor: theme.palette.background.default,
-    borderTop: `1px solid ${theme.palette.colors.border03}`,
-    borderBottom: `1px solid ${theme.palette.colors.border03}`,
+    backgroundColor: theme.palette.colors.sidebarSelected,
   },
 
   [`& .${classes.primary}`]: {
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index 2f74612305..af294b6dc8 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -121,6 +121,7 @@ const lightTheme = createTheme({
       border03: '#D2D2D2',
       // Other custom colors
       sidebarBackground: '#511974',
+      sidebarSelected: '#fff3',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
@@ -315,7 +316,8 @@ const darkTheme = createTheme({
       border02: '#B3B3B3',
       border03: '#D2D2D2',
       // Gradients and other run-of-the-mill things
-      sidebarBackground: '#2F193D',
+      sidebarBackground: '#000',
+      sidebarSelected: '#fff3',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820