diff --git a/CHANGELOG.md b/CHANGELOG.md
index 220e69a845..63719417c2 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))
 
diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx
index 32c931de55..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 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}>
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..3bb73fd070 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
+++ b/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>
   )
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 2c4d3626e4..3fc25deb93 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'
 
@@ -61,7 +61,6 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
   },
 
   [`& .${classes.editUsernameFieldLabel}`]: {
-    color: '#4C4C4C',
     margin: '0px 16px 8px 16px',
     fontSize: '14px',
     fontWeight: '400',
@@ -69,7 +68,6 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
   },
 
   [`& .${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',
                           }}
diff --git a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.tsx
index d8142472ea..20fffcee9d 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'
 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',
   },
diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
index 04e09ff3be..1941efe9a4 100644
--- a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
+++ b/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',
   },
diff --git a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx b/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
index a70902b9ce..9a4b95b2e9 100644
--- a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
+++ b/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}`]: {
diff --git a/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx b/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
index cb9dd6f1a3..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: 'linear-gradient(290.29deg, #521576 18.61%, #E42656 96.07%)',
+    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/Titlebar.tsx b/packages/desktop/src/renderer/components/Titlebar.tsx
index da6b6caaf8..a1f99b52b6 100644
--- a/packages/desktop/src/renderer/components/Titlebar.tsx
+++ b/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({
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/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/ui/Tab/Tab.tsx b/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
index c148b94fda..27753827ba 100644
--- a/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
+++ b/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`,
   },
 }))
 
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/components/widgets/channels/ChannelHeader.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
index cc3b03e414..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'
 
@@ -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>
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..0442935899 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'
@@ -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`,
@@ -71,6 +70,7 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     scrollPaddingBottom: '12px',
     height: '48px',
     lineHeight: '24px',
+    backgroundColor: theme.palette.background.default,
     '&:empty': {
       '&:before': {
         content: 'attr(placeholder)',
@@ -90,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',
@@ -129,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',
@@ -175,9 +169,6 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     marginLeft: 20,
     marginRight: 5,
   },
-  [`& .${classes.errorText}`]: {
-    color: theme.palette.colors.trueBlack,
-  },
   [`& .${classes.errorBox}`]: {
     marginTop: 5,
   },
@@ -249,6 +240,8 @@ export const ChannelInputComponent: React.FC<ChannelInputProps> = ({
 
   const [message, setMessage] = React.useState(initialMessage)
 
+  const theme = useTheme()
+
   React.useEffect(() => {
     setMessage(initialMessage)
     const ref = textAreaRef.current
@@ -440,6 +433,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/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/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..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 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 e8677f7de2..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 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 89123538ee..bdb4701b64 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
+++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
@@ -4,13 +4,13 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import UpdateModal, { UpdateModalProps } from './UpdateModalComponent'
 
 import { withTheme } from '../../../storybook/decorators'
-import theme from '../../../theme'
+import { getTheme } from '../../../theme'
+import { createLogger } from '../../../logger'
 
 import Button from '@mui/material/Button'
 
-import { createLogger } from '../../../logger'
-
 const logger = createLogger('updateModal:component:stories')
+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 2f2768df8b..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 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 62e2f26f56..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 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 f6d3b47b49..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 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/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/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;
diff --git a/packages/desktop/src/renderer/storybook/decorators.tsx b/packages/desktop/src/renderer/storybook/decorators.tsx
index c6cfdd7bc4..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 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 b341fac9ff..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 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 1bfb06938a..af294b6dc8 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -1,9 +1,10 @@
-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'
 
-export default createTheme({
+const lightTheme = createTheme({
   typography: {
     fontFamily: [font, fontLogs].join(','),
     fontStyle: 'normal',
@@ -62,6 +63,7 @@ export default createTheme({
     },
   },
   palette: {
+    mode: 'light',
     background: {
       // Background colors (white-ish for light theme, black-ish for dark)
       default: '#ffffff',
@@ -88,6 +90,7 @@ export default 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
@@ -116,6 +119,9 @@ export default createTheme({
       border01: '#F0F0F0',
       border02: '#B3B3B3',
       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
@@ -188,3 +194,205 @@ 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',
+    },
+    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,
+    },
+    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: '#151515',
+      paper: '#222222',
+    },
+    // 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
+      contrastText: '#FFF', // Contrasts with the background colors
+      // 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',
+      // Gradients and other run-of-the-mill things
+      sidebarBackground: '#000',
+      sidebarSelected: '#fff3',
+    },
+  },
+  //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
+  shadows: [
+    'none',
+    '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
+    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,
+        },
+      },
+    },
+  },
+})
+
+const getTheme = (): Theme => {
+  return nativeTheme?.shouldUseDarkColors ? darkTheme : lightTheme
+}
+
+export { lightTheme, darkTheme, getTheme }