feat: TryQuiet#1502 get light/dark from native theme and access it th…

…rough DRY function

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

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

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(
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>

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(
       <ThemeProvider theme={theme}>
         <PossibleImpersonationAttackModalComponent handleClose={() => {}} open={true} communityName={'devteam'} />

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<typeof UpdateModal> = args => {
   return <UpdateModal {...args} />
 }

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(

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(

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(

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) => (
   <Provider store={store}>
     <Story />

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
 }

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 }