Feat/dark mode (#1502)

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))
 

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 { 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={theme}>
+      <ThemeProvider theme={getTheme()}>
         <DndProvider backend={HTML5Backend}>
           <HashRouter>
             <Provider store={store}>

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
 

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

packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx

@@ -1,18 +1,17 @@
 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,
   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 theme from '../../theme'
+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()
+
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -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' }}>
@@ -97,6 +96,8 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
 }
 
 export const ContextMenuHint: FC<ContextMenuHintProps> = ({ hint }) => {
+  const theme = useTheme()
+
   return (
     <Grid
       style={{
@@ -129,6 +130,8 @@ export const ContextMenuItemList: FC<ContextMenuItemListProps> = ({ items }) =>
 }
 
 export const ContextMenuItem: FC<ContextMenuItemProps> = ({ title, action }) => {
+  const theme = useTheme()
+
   return (
     <Grid
       style={{
@@ -153,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>
   )

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'
 
@@ -61,15 +61,13 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
   },
 
   [`& .${classes.editUsernameFieldLabel}`]: {
-    color: '#4C4C4C',
     margin: '0px 16px 8px 16px',
     fontSize: '14px',
     fontWeight: '400',
     fontFamily: 'Rubik, sans-serif',
   },
 
   [`& .${classes.editUsernameField}`]: {
-    color: '#33333380',
     background: theme.palette.background.paper,
     margin: '0px 16px',
     padding: '16px',
@@ -91,7 +89,7 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
     fontFamily: 'Rubik, sans-serif',
     cursor: 'pointer',
     '&:hover': {
-      backgroundColor: '#B3B3B31A',
+      backgroundColor: theme.palette.background.paper,
     },
   },
 }))
@@ -163,6 +161,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) {
@@ -212,7 +212,7 @@ export const UserProfileMenuProfileView: FC<UserProfileMenuProfileViewProps> = (
                           style={{
                             width: '96px',
                             height: '96px',
-                            background: '#F3F0F6',
+                            background: theme.palette.background.paper,
                             borderRadius: '8px',
                             marginBottom: '16px',
                           }}
@@ -318,6 +318,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) {
@@ -421,7 +423,7 @@ export const UserProfileMenuEditView: FC<UserProfileMenuEditViewProps> = ({
                           style={{
                             width: '96px',
                             height: '96px',
-                            background: '#F3F0F6',
+                            background: theme.palette.background.paper,
                             borderRadius: '8px',
                             marginBottom: '16px',
                           }}

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'
 import { createLogger } from '../../logger'
 
@@ -18,7 +17,7 @@ const classes = {
   middle: `${PREFIX}middle`,
 }
 
-const StyledMath = styled('span')(() => ({
+const StyledMath = styled('span')(({ theme }) => ({
   [`&.${classes.message}`]: {
     marginLeft: '20px',
   },

packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx

@@ -31,7 +31,9 @@ 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],
 
   [`& .${classes.leaveComunity}`]: {
@@ -48,8 +50,6 @@ const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({
 }))
 
 const StyledTabs = styled(Tabs)(({ theme }) => ({
-  color: theme.palette.colors.trueBlack,
-
   [`& .${classes.indicator}`]: {
     height: '0 !important',
   },

packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx

@@ -25,10 +25,8 @@ 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.colors.sidebarSelected,
   },
 
   [`& .${classes.primary}`]: {

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%)',
+    backgroundColor: theme.palette.colors.sidebarBackground,
     color: theme.palette.colors.white,
   },
 

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',
             }}

packages/desktop/src/renderer/components/Titlebar.tsx

@@ -1,7 +1,10 @@
+import { useTheme } from '@mui/material'
 import { Titlebar, Color } from 'custom-electron-titlebar'
-import theme from '../theme'
+
+import { getTheme } from '../theme'
 
 export const addTitlebar = () => {
+  const theme = getTheme()
   setTimeout(() => {
     // eslint-disable-next-line
     const titlebar = new Titlebar({

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',

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 (

packages/desktop/src/renderer/components/ui/Tab/Tab.tsx

@@ -23,9 +23,8 @@ 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`,
   },
 }))
 

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,
     },
   },
 

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'
 
@@ -79,11 +77,6 @@ const Root = styled('div')(({ theme }) => ({
     minHeight: 0,
   },
 
-  [`& .${classes.selected}`]: {
-    color: theme.palette.colors.trueBlack,
-    backgroundColor: theme.palette.colors.white,
-  },
-
   [`& .${classes.indicator}`]: {
     maxHeight: 0,
   },
@@ -187,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>