feat: implement custom MUI theme and integrate ThemeProvider into App shell

2026-04-24 07:11:48 +03:00
parent c89b56f4cb
commit 34f4d5b559
1 changed files with 48 additions and 0 deletions
@@ -0,0 +1,48 @@
+import { createTheme } from '@mui/material/styles';
+
+export const getTheme = (mode: 'light' | 'dark') => createTheme({
+  palette: {
+    mode,
+    primary: {
+      main: '#0061ff',
+    },
+    secondary: {
+      main: '#ff8c00',
+    },
+    background: {
+      default: mode === 'light' ? '#f8f9fa' : '#0f172a',
+      paper: mode === 'light' ? 'rgba(255, 255, 255, 0.7)' : 'rgba(15, 23, 42, 0.8)',
+    },
+  },
+  typography: {
+    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+    h1: { fontWeight: 700 },
+    h2: { fontWeight: 700 },
+    h3: { fontWeight: 600 },
+    button: { textTransform: 'none', fontWeight: 600 },
+  },
+  shape: {
+    borderRadius: 12,
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+          },
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backdropFilter: 'blur(12px)',
+          border: `1px solid ${mode === 'light' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(255, 255, 255, 0.1)'}`,
+        },
+      },
+    },
+  },
+});