mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-10 02:16:57 +00:00
Split themes into separate files
This commit is contained in:
parent
b64784cf45
commit
12a3dff029
@ -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',
|
||||
|
@ -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 />
|
||||
|
@ -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%;
|
||||
}
|
||||
|
85
src/styles/theme-common.ts
Normal file
85
src/styles/theme-common.ts
Normal 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
83
src/styles/theme-dark.ts
Normal 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
84
src/styles/theme-light.ts
Normal 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 };
|
@ -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 };
|
Loading…
x
Reference in New Issue
Block a user