Split themes into separate files

This commit is contained in:
Nicola Benaglia 2025-04-18 09:32:03 +02:00
parent b64784cf45
commit 12a3dff029
7 changed files with 258 additions and 208 deletions

View File

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

View File

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

View File

@ -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%;
}

View File

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

83
src/styles/theme-dark.ts Normal file
View File

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

84
src/styles/theme-light.ts Normal file
View File

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

View File

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