Theme System
The theme system is one of the most powerful parts of the library. It generates full MUI themes from a structured config object (ThemeBuildConfig) with 25+ customisation dimensions.
Architecture
ThemeContext (runtime state)
↓ reads/writes localStorage
↓ calls buildThemePair(config)
↓
buildTheme(config, "light") + buildTheme(config, "dark")
↓ uses
getButtonStyle() ← themes/effects
getShadowSystem() ← themes/effects
getScrollbarCSS() ← themes/effects
getGlassEffect() ← themes/effects
PALETTES[name] ← themes/palettes
↓
MUI createTheme(...)
The ThemeBuildConfig interface
interface ThemeBuildConfig {
colorTheme?: ThemePaletteName; // "aurora" | "ocean" | "forest" | ...
mode?: "light" | "dark";
fontSize?: "small" | "medium" | "large";
fontFamily?: string;
borderRadius?: "sharp" | "rounded" | "extra-round";
tablePadding?: number; // 0–10 (px offset added to cell padding)
tableTextAlign?: "left" | "center" | "right";
scrollbarStyle?: ScrollbarStyle;
shadowIntensity?: ShadowIntensity;
glassIntensity?: GlassIntensity;
animationSpeed?: AnimationSpeed;
gradientStyle?: GradientStyle;
surfaceStyle?: SurfaceStyle;
buttonStyle?: ButtonStyle;
borderWidth?: BorderWidth;
tableHeaderStyle?: TableHeaderStyle;
iconStyle?: IconStyle;
inputStyle?: InputStyle;
}
Colour palettes
Nine built-in palettes:
| Name | Description |
|---|---|
aurora | Purple-violet (default) |
ocean | Blue-teal |
forest | Green-emerald |
sunset | Orange-amber |
rose | Pink-red |
slate | Grey-blue |
midnight | Deep indigo |
coral | Coral-red |
jade | Teal-green |