Add dummy dark theme, convert to useTheme hook

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

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,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={{

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

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(() => {

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

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

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'

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'

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'
 

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'

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'

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'

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 =

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)

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

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'