diff options
author | Mo Tarbin <mhed.t91@gmail.com> | 2024-06-30 18:55:39 -0400 |
---|---|---|
committer | Mo Tarbin <mhed.t91@gmail.com> | 2024-06-30 18:55:39 -0400 |
commit | 2657469964e24ffbeb905024532120395f6e797c (patch) | |
tree | 2fe9db8a4ecfa92d854ca94f7586d81163c8bd25 /src/contexts/ThemeContext.jsx | |
download | donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.gz donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.bz2 donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.zip |
move to Donetick Org, First commit frontend
Diffstat (limited to '')
-rw-r--r-- | src/contexts/ThemeContext.jsx | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/src/contexts/ThemeContext.jsx b/src/contexts/ThemeContext.jsx new file mode 100644 index 0000000..45e91b5 --- /dev/null +++ b/src/contexts/ThemeContext.jsx @@ -0,0 +1,86 @@ +import { COLORS } from '@/constants/theme' +import { CssBaseline } from '@mui/joy' +import { CssVarsProvider, extendTheme } from '@mui/joy/styles' +import PropType from 'prop-types' + +const primaryColor = 'cyan' + +const shades = [ + '50', + ...Array.from({ length: 9 }, (_, i) => String((i + 1) * 100)), +] + +const getPallete = (key = primaryColor) => { + return shades.reduce((acc, shade) => { + acc[shade] = COLORS[key][shade] + return acc + }, {}) +} + +const primaryPalette = getPallete(primaryColor) + +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: primaryPalette, + success: { + 50: '#f3faf7', + 100: '#def5eb', + 200: '#b7e7d5', + 300: '#8ed9be', + 400: '#6ecdb0', + 500: '#4ec1a2', + 600: '#46b89a', + 700: '#3cae91', + 800: '#32a487', + 900: '#229d76', + }, + danger: { + 50: '#fef2f2', + 100: '#fde8e8', + 200: '#fbd5d5', + 300: '#f9c1c1', + 400: '#f6a8a8', + 500: '', + 600: '#f47272', + 700: '#e33434', + 800: '#cc1f1a', + 900: '#b91c1c', + }, + }, + warning: { + 50: '#fffdf7', + 100: '#fef8e1', + 200: '#fdecb2', + 300: '#fcd982', + 400: '#fbcf52', + 500: '#f9c222', + 600: '#f6b81e', + 700: '#f3ae1a', + 800: '#f0a416', + 900: '#e99b0e', + }, + }, + }, + dark: { + palette: { + primary: primaryPalette, + }, + }, +}) + +const ThemeContext = ({ children }) => { + return ( + <CssVarsProvider theme={theme}> + <CssBaseline /> + {children} + </CssVarsProvider> + ) +} + +ThemeContext.propTypes = { + children: PropType.node, +} + +export default ThemeContext |