From 12a3dff029278da21065d32be5455bacea4a8712 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Fri, 18 Apr 2025 09:32:03 +0200 Subject: [PATCH] Split themes into separate files --- src/components/Theme/ThemeContext.tsx | 3 +- src/main.tsx | 2 + src/styles/index.css | 29 +---- src/styles/theme-common.ts | 85 ++++++++++++ src/styles/theme-dark.ts | 83 ++++++++++++ src/styles/theme-light.ts | 84 ++++++++++++ src/styles/theme.ts | 180 -------------------------- 7 files changed, 258 insertions(+), 208 deletions(-) create mode 100644 src/styles/theme-common.ts create mode 100644 src/styles/theme-dark.ts create mode 100644 src/styles/theme-light.ts delete mode 100644 src/styles/theme.ts diff --git a/src/components/Theme/ThemeContext.tsx b/src/components/Theme/ThemeContext.tsx index e64c183..5a5abb8 100644 --- a/src/components/Theme/ThemeContext.tsx +++ b/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', diff --git a/src/main.tsx b/src/main.tsx index 3f04c89..69e8901 100644 --- a/src/main.tsx +++ b/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( <> + diff --git a/src/styles/index.css b/src/styles/index.css index 3fd5ed7..f8b8090 100644 --- a/src/styles/index.css +++ b/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%; -} diff --git a/src/styles/theme-common.ts b/src/styles/theme-common.ts new file mode 100644 index 0000000..600b6da --- /dev/null +++ b/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 }; diff --git a/src/styles/theme-dark.ts b/src/styles/theme-dark.ts new file mode 100644 index 0000000..0fa1e48 --- /dev/null +++ b/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 }; diff --git a/src/styles/theme-light.ts b/src/styles/theme-light.ts new file mode 100644 index 0000000..15257c3 --- /dev/null +++ b/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 }; diff --git a/src/styles/theme.ts b/src/styles/theme.ts deleted file mode 100644 index 6ea83cc..0000000 --- a/src/styles/theme.ts +++ /dev/null @@ -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 };