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 ( - + 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( 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( {}} 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 = args => { return } 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) => ( 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 }