feat: MUI test

styles/muiTheme.ts

@@ -0,0 +1,50 @@
+import { createTheme } from '@mui/material/styles';
+
+// Map existing CSS variable tokens to MUI palette via getComputedStyle at runtime (for SSR fallback provide defaults)
+const cssVar = (name: string, fallback: string) => {
+  if (typeof window === 'undefined') return fallback;
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return v || fallback;
+};
+
+export const buildTheme = () => {
+  const mode: 'light' | 'dark' = (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) ? 'dark' : 'light';
+  const primaryMain = cssVar('--color-accent', '#00aeef');
+  const bgDefault = cssVar('--color-background', mode === 'dark' ? '#0f1115' : '#f1f5f9');
+  const bgPaper = cssVar('--color-surface', mode === 'dark' ? '#1c232d' : '#ffffff');
+  const textPrimary = cssVar('--color-fg', mode === 'dark' ? '#e2e8f0' : '#0f172a');
+  const textSecondary = cssVar('--color-fg-muted', mode === 'dark' ? '#94a3b8' : '#475569');
+
+  return createTheme({
+    palette: {
+      mode,
+      primary: { main: primaryMain },
+      background: { default: bgDefault, paper: bgPaper },
+      text: { primary: textPrimary, secondary: textSecondary },
+      divider: cssVar('--color-border', mode === 'dark' ? '#334155' : '#e2e8f0'),
+    },
+    shape: { borderRadius: 8 },
+    typography: {
+      fontFamily: 'Roboto, Arial, Helvetica, sans-serif',
+      button: { textTransform: 'none', fontWeight: 600 },
+      fontSize: 14,
+    },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: { borderRadius: 8 },
+          containedPrimary: {
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: { backgroundImage: 'none' }
+        }
+      }
+    }
+  });
+};
+
+export const muiTheme = buildTheme();