71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
// src/theme.ts
|
|
import * as Colours from "@mui/material/colors"
|
|
import { createTheme, ThemeOptions } from '@mui/material/styles';
|
|
import {
|
|
getPrimaryColour,
|
|
getSecondaryColour,
|
|
} from "../services/whiteLabel";
|
|
|
|
const baseTheme: ThemeOptions = {
|
|
palette: {
|
|
mode: 'light', // default mode; will be overridden by system if needed
|
|
primary: {
|
|
main: '#1976d2',
|
|
},
|
|
background: {
|
|
default: '#ffffff',
|
|
paper: '#f5f5f5',
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: [
|
|
"Open Sans",
|
|
"-apple-system",
|
|
"BlinkMacSystemFont",
|
|
'"Segoe UI"',
|
|
'"Helvetica Neue"',
|
|
"Arial",
|
|
"sans-serif",
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"'
|
|
].join(",")
|
|
}
|
|
// Add other options if needed
|
|
};
|
|
|
|
function makePaletteColor(name: keyof typeof Colours) {
|
|
if (name.startsWith("#")) {
|
|
return { main: name };
|
|
}
|
|
const ramp = Colours[name] as Record<number, string>; // e.g., blue[500], blue[300], etc.
|
|
return {
|
|
main: ramp[500],
|
|
light: ramp[300],
|
|
dark: ramp[700],
|
|
};
|
|
}
|
|
|
|
export const getTheme = (mode: 'light' | 'dark') =>
|
|
createTheme({
|
|
...baseTheme,
|
|
palette: {
|
|
...baseTheme.palette,
|
|
primary: makePaletteColor(getPrimaryColour()),
|
|
secondary: makePaletteColor(getSecondaryColour()),
|
|
mode,
|
|
...(mode === 'dark'
|
|
? {
|
|
background: {
|
|
default: '#121212',
|
|
paper: '#1e1e1e',
|
|
},
|
|
}
|
|
: {
|
|
background: {
|
|
default: "#e5e5e5",
|
|
paper: "#f0f0f0",
|
|
},
|
|
}),
|
|
},
|
|
});
|