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