51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
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();
|