Skip to main content

ThemeContext

ThemeContext manages all runtime theme customisation. It persists every dimension to localStorage under prefixed keys and rebuilds the MUI theme pair whenever any value changes.

Import​

import { useThemeContext } from "@xocialive/ui-components/contexts";
import type { ThemeContextType, ThemeColor, ThemeMode, FontFamily } from "@xocialive/ui-components";

Hook​

const {
  mode,
  setMode,
  colorTheme,
  setColorTheme,
  fontSize,
  setFontSize,
  fontFamily,
  setFontFamily,
  borderRadius,
  setBorderRadius,
  scrollbarStyle,
  setScrollbarStyle,
  shadowIntensity,
  setShadowIntensity,
  // ... all 25+ dimensions
  resetToDefaults,
} = useThemeContext();

Exported type aliases​

TypeValues
ThemeMode"light" | "dark"
ThemeColor9 palette names
FontSize"small" | "medium" | "large"
FontFamily"tajawal" | "cairo" | "ibm-plex-sans-arabic" | "ibm-plex-sans" | "montserrat"
SidebarStyle"default" | "mini" | "floating"
BorderRadius"sharp" | "rounded" | "extra-round"
LayoutDensity"comfortable" | "compact" | "spacious"
ColorContrast"normal" | "high"
HeaderStyle"default" | "transparent" | "colored"
CardHoverEffect"none" | "lift" | "glow" | "border"
FocusRingStyle"default" | "thick" | "none"
DividerStyle"default" | "dashed" | "none"

localStorage keys​

All preferences are stored under the PREFERENCE_KEYS constants. See Preferences utility for details.

Important implementation note​

When overriding the palette on top of a built theme, you must re-attach components explicitly:

// ✅ Correct
const finalTheme = createTheme({
  ...baseTheme,
  components: baseTheme.components,
  palette: customPalette,
});

// ❌ Wrong — component overrides from buildTheme() are silently dropped
const finalTheme = createTheme({ ...baseTheme, palette: customPalette });