Split themes into separate files

src/components/Theme/ThemeContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useState, useMemo } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { darkTheme, lightTheme } from '../../styles/theme';
+import { darkTheme } from '../../styles/theme-dark';
+import { lightTheme } from '../../styles/theme-light';
 
 const ThemeContext = createContext({
   themeMode: 'light',

src/main.tsx

@@ -5,10 +5,12 @@ import './messaging/messagesToBackground';
 import { MessageQueueProvider } from './MessageQueueContext.tsx';
 import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from './components/Theme/ThemeContext.tsx';
+import { CssBaseline } from '@mui/material';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <>
     <ThemeProvider>
+      <CssBaseline />
       <MessageQueueProvider>
         <RecoilRoot>
           <App />

src/styles/index.css

@@ -19,29 +19,6 @@
   font-weight: 400;
 }
 
-:root {
-  padding: 0px;
-  margin: 0px;
-  box-sizing: border-box !important;
-  word-break: break-word;
-  --color-instance: #1e1e20;
-  --color-instance-popover-bg: #222222;
-  --Mail-Background: rgba(49, 51, 56, 1);
-  --new-message-text: black;
-  --bg-primary: rgba(31, 32, 35, 1);
-  --bg-2: #27282c;
-  --bg-3: rgba(0, 0, 0, 0.1);
-  --unread: #4297e2;
-  --danger: #b14646;
-  --apps-circle: #1f2023;
-  --green: #5eb049;
-}
-
-body {
-  margin: 0px;
-  overflow: hidden;
-}
-
 .image-container {
   position: relative;
 }
@@ -68,6 +45,7 @@ body {
 ::-webkit-scrollbar-track {
   background-color: transparent;
 }
+
 ::-webkit-scrollbar-track:hover {
   background-color: transparent;
 }
@@ -84,6 +62,7 @@ body {
   border: 4px solid transparent;
   transition: 0.3s background-color;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background-color: #363636;
 }
@@ -131,7 +110,3 @@ html,
 body {
   overscroll-behavior: none !important;
 }
-
-.swiper {
-  width: 100%;
-}

src/styles/theme-common.ts

@@ -0,0 +1,85 @@
+// Extend the Theme interface
+const commonThemeOptions = {
+  typography: {
+    fontFamily: ['Inter'].join(','),
+    h1: {
+      fontSize: '2rem',
+      fontWeight: 600,
+    },
+    h2: {
+      fontSize: '1.75rem',
+      fontWeight: 500,
+    },
+    h3: {
+      fontSize: '1.5rem',
+      fontWeight: 500,
+    },
+    h4: {
+      fontSize: '1.25rem',
+      fontWeight: 500,
+    },
+    h5: {
+      fontSize: '1rem',
+      fontWeight: 500,
+    },
+    h6: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+    },
+    body: {
+      margin: '0px',
+      overflow: 'hidden',
+    },
+    body1: {
+      fontSize: '16px',
+      fontWeight: 400,
+      lineHeight: 1.5,
+      letterSpacing: 'normal',
+    },
+    body2: {
+      fontSize: '18px',
+      fontWeight: 400,
+      lineHeight: 1.4,
+      letterSpacing: '0.2px',
+    },
+  },
+  spacing: 8,
+  shape: {
+    borderRadius: 4,
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'inherit',
+          transition: 'filter 0.3s ease-in-out',
+          '&:hover': {
+            filter: 'brightness(1.1)',
+          },
+        },
+      },
+      defaultProps: {
+        disableElevation: true,
+        disableRipple: true,
+      },
+    },
+    MuiModal: {
+      styleOverrides: {
+        root: {
+          zIndex: 50000,
+        },
+      },
+    },
+  },
+};
+
+export { commonThemeOptions };

src/styles/theme-dark.ts

@@ -0,0 +1,83 @@
+import { createTheme } from '@mui/material/styles';
+import { commonThemeOptions } from './theme-common';
+
+const darkTheme = createTheme({
+  ...commonThemeOptions,
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#2e3d60',
+      dark: '#1a2744',
+      light: '#3f4b66',
+    },
+    secondary: {
+      main: '#45adff',
+    },
+    background: {
+      default: '#313338',
+      paper: '#1e1e20',
+    },
+    text: {
+      primary: '#ffffff',
+      secondary: '#b3b3b3',
+    },
+  },
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none',
+          borderRadius: '8px',
+          transition: 'all 0.3s ease-in-out',
+          '&:hover': {
+            cursor: 'pointer',
+            boxShadow:
+              ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);',
+          },
+        },
+      },
+    },
+    MuiIcon: {
+      defaultProps: {
+        style: {
+          color: '#ffffff',
+          opacity: 0.5,
+        },
+      },
+    },
+    MuiCssBaseline: {
+      styleOverrides: {
+        ':root': {
+          '--color-instance': '#1e1e20',
+          '--color-instance-popover-bg': '#222222',
+          '--Mail-Background': 'rgb(101, 248, 174)',
+          '--new-message-text': 'black',
+          '--bg-primary': 'rgba(31, 32, 35, 1)',
+          '--bg-2': '#27282c',
+          '--bg-3': 'rgba(0, 0, 0, 0.1)',
+          '--unread': '#4297e2',
+          '--danger': '#b14646',
+          '--apps-circle': '#1f2023',
+          '--green': '#5eb049',
+          '--gallo': 'gallo',
+        },
+        '*, *::before, *::after': {
+          boxSizing: 'border-box',
+        },
+        html: {
+          padding: 0,
+          margin: 0,
+        },
+        body: {
+          padding: 0,
+          margin: 0,
+          wordBreak: 'break-word',
+          backgroundColor: 'var(--bg-primary)',
+          color: 'var(--new-message-text)',
+        },
+      },
+    },
+  },
+});
+
+export { darkTheme };

src/styles/theme-light.ts

@@ -0,0 +1,84 @@
+import { createTheme } from '@mui/material/styles';
+import { commonThemeOptions } from './theme-common';
+
+const lightTheme = createTheme({
+  ...commonThemeOptions,
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#f4f4fb',
+      dark: '#eaecf4',
+      light: '#f9f9fd',
+    },
+    secondary: {
+      main: '#c2deec',
+    },
+    background: {
+      default: '#fafafa',
+      paper: '#f0f0f0',
+    },
+    text: {
+      primary: '#000000',
+      secondary: '#525252',
+    },
+  },
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow:
+            'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(230, 200, 200, 0.06) 0px 1px 2px 0px;',
+          borderRadius: '8px',
+          transition: 'all 0.3s ease-in-out',
+          '&:hover': {
+            cursor: 'pointer',
+            boxShadow:
+              'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;',
+          },
+        },
+      },
+    },
+    MuiIcon: {
+      defaultProps: {
+        style: {
+          color: '#000000',
+          opacity: 0.5,
+        },
+      },
+    },
+    MuiCssBaseline: {
+      styleOverrides: {
+        ':root': {
+          '--color-instance': '#1e1e20',
+          '--color-instance-popover-bg': '#222222',
+          '--Mail-Background': 'rgba(49, 51, 56, 1)',
+          '--new-message-text': 'black',
+          '--bg-primary': 'rgba(31, 32, 35, 1)',
+          '--bg-2': '#27282c',
+          '--bg-3': 'rgba(0, 0, 0, 0.1)',
+          '--unread': '#4297e2',
+          '--danger': '#b14646',
+          '--apps-circle': '#1f2023',
+          '--green': '#5eb049',
+          '--pollo': 'pollo',
+        },
+        '*, *::before, *::after': {
+          boxSizing: 'border-box',
+        },
+        html: {
+          padding: 0,
+          margin: 0,
+        },
+        body: {
+          padding: 0,
+          margin: 0,
+          wordBreak: 'break-word',
+          backgroundColor: 'var(--bg-primary)',
+          color: 'var(--new-message-text)',
+        },
+      },
+    },
+  },
+});
+
+export { lightTheme };

src/styles/theme.ts

@@ -1,180 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-
-// Extend the Theme interface
-const commonThemeOptions = {
-  typography: {
-    fontFamily: ['Roboto'].join(','),
-    h1: {
-      fontSize: '2rem',
-      fontWeight: 600,
-    },
-    h2: {
-      fontSize: '1.75rem',
-      fontWeight: 500,
-    },
-    h3: {
-      fontSize: '1.5rem',
-      fontWeight: 500,
-    },
-    h4: {
-      fontSize: '1.25rem',
-      fontWeight: 500,
-    },
-    h5: {
-      fontSize: '1rem',
-      fontWeight: 500,
-    },
-    h6: {
-      fontSize: '0.875rem',
-      fontWeight: 500,
-    },
-    body1: {
-      fontSize: '23px',
-      fontWeight: 400,
-      lineHeight: 1.5,
-      letterSpacing: 'normal',
-    },
-
-    body2: {
-      fontSize: '18px',
-      fontWeight: 400,
-      lineHeight: 1.4,
-      letterSpacing: '0.2px',
-    },
-  },
-  spacing: 8,
-  shape: {
-    borderRadius: 4,
-  },
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 900,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'inherit',
-          transition: 'filter 0.3s ease-in-out',
-          '&:hover': {
-            filter: 'brightness(1.1)',
-          },
-        },
-      },
-      defaultProps: {
-        disableElevation: true,
-        disableRipple: true,
-      },
-    },
-    MuiModal: {
-      styleOverrides: {
-        root: {
-          zIndex: 50000,
-        },
-      },
-    },
-  },
-};
-
-const lightTheme = createTheme({
-  ...commonThemeOptions,
-  palette: {
-    mode: 'light',
-    primary: {
-      main: '#f4f4fb',
-      dark: '#eaecf4',
-      light: '#f9f9fd',
-    },
-    secondary: {
-      main: '#c2deec',
-    },
-    background: {
-      default: '#fafafa',
-      paper: '#f0f0f0',
-    },
-    text: {
-      primary: '#000000',
-      secondary: '#525252',
-    },
-  },
-  components: {
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          boxShadow:
-            'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(230, 200, 200, 0.06) 0px 1px 2px 0px;',
-          borderRadius: '8px',
-          transition: 'all 0.3s ease-in-out',
-          '&:hover': {
-            cursor: 'pointer',
-            boxShadow:
-              'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;',
-          },
-        },
-      },
-    },
-    MuiIcon: {
-      defaultProps: {
-        style: {
-          color: '#000000',
-          opacity: 0.5,
-        },
-      },
-    },
-  },
-});
-
-const darkTheme = createTheme({
-  ...commonThemeOptions,
-  palette: {
-    mode: 'dark',
-    primary: {
-      main: '#2e3d60',
-      dark: '#1a2744',
-      light: '#3f4b66',
-    },
-    secondary: {
-      main: '#45adff',
-    },
-
-    background: {
-      default: '#313338',
-      paper: '#1e1e20',
-    },
-    text: {
-      primary: '#ffffff',
-      secondary: '#b3b3b3',
-    },
-  },
-  components: {
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          boxShadow: 'none',
-          borderRadius: '8px',
-          transition: 'all 0.3s ease-in-out',
-          '&:hover': {
-            cursor: 'pointer',
-            boxShadow:
-              ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);',
-          },
-        },
-      },
-    },
-    MuiIcon: {
-      defaultProps: {
-        style: {
-          color: '#ffffff',
-          opacity: 0.5,
-        },
-      },
-    },
-  },
-});
-
-export { lightTheme, darkTheme };