Merge pull request #2521 from mike-kiss/feat/dark-mode

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>