Color Themes

The library ships nine colour palettes. Each palette is defined as a full MUI palette object and is used by buildTheme() to generate both a light and a dark theme variant.

Available palettes

Palette name	Primary	Secondary	Character
aurora	#6c63ff purple	#ff6584 pink	Default; vibrant, modern
ocean	#0077b6 deep blue	#00b4d8 cyan	Professional, calm
forest	#2d6a4f deep green	#52b788 mint	Natural, trustworthy
sunset	#e76f51 coral-orange	#f4a261 amber	Energetic, warm
rose	#c9184a deep rose	#ff4d6d pink-red	Bold, expressive
slate	#3d5a80 slate-blue	#98c1d9 light blue	Neutral, corporate
midnight	#4a0e8f deep indigo	#7b2d8b purple	Dark, premium
coral	#e63946 coral-red	#f77f00 orange	Urgent, attention-grabbing
jade	#087f5b jade-teal	#40c057 leaf-green	Fresh, eco

Import

import { PALETTES, type ThemePaletteName } from "@xocialive/ui-components/themes";

// Get a specific palette config
const auroraLight = PALETTES.aurora.light;
const auroraDark = PALETTES.aurora.dark;

Choosing a palette at runtime

Palette switching is handled by ThemeContext. Users pick a palette via the ThemeCustomizationDrawer (if your shell includes it), and the selection is persisted to localStorage.

import { useThemeContext } from "@xocialive/ui-components/contexts";

function PalettePicker() {
  const { colorTheme, setColorTheme } = useThemeContext();

  return (
    <>
      {(["aurora", "ocean", "forest", "sunset", "rose"] as ThemePaletteName[]).map((name) => (
        <Button key={name} variant={colorTheme === name ? "contained" : "outlined"} onClick={() => setColorTheme(name)}>
          {name}
        </Button>
      ))}
    </>
  );
}