generated:catalog.entry.themes.title

docs:themes.caption.layers-lead

1. docs:themes.layer.foundation

   docs:themes.layer.foundation-detail

2. docs:themes.layer.appearance

   docs:themes.layer.appearance-detail

3. docs:themes.layer.palette

   docs:themes.layer.palette-detail

docs:themes.caption.choose-path-lead

@import '@xngui/styles';@import '@xngui/styles/themes/chromatic/blue';

import { XPaletteService } from '@xngui/theme';inject(XPaletteService).setPalette('ocean');

docs:themes.caption.overview-lead

docs:styles.caption.theme-services

import { XThemeService } from '@xngui/theme';const theme = inject(XThemeService);theme.mode(); // 'light' | 'dark' | 'system'theme.resolvedMode(); // 'light' | 'dark' after system resolvetheme.isDark(); // booleantheme.setMode('dark'); // persists to localStoragetheme.toggle(); // flips resolved light ↔ darktheme.cycle(); // light → dark → system → …

import { XPaletteService } from '@xngui/theme';const palettes = inject(XPaletteService);palettes.palette(); // active palette idpalettes.catalog(); // built-in + registered metapalettes.setPalette('blue'); // injects <style id="x-palette">palettes.registerPalette({  id: 'brand',  label: 'Brand',  description: 'Custom ramp.',  icon: '🎨',  tokens: { '--x-primary-500': 'oklch(0.55 0.14 250)' },});

import { XTokenResolver } from '@xngui/theme';const tokens = inject(XTokenResolver);tokens.resolve('--x-primary'); // computedCSSValuetokens.invalidate(); // clear cache after theme/palette change

docs:styles.caption.appearance

docs:styles.data.preference

system

docs:styles.data.resolved

light

docs:styles.data.active-palette

default

import { XPaletteService, XThemeService } from '@xngui/theme';// Appearance — toggles .dark on <html>inject(XThemeService).setMode('dark');inject(XThemeService).toggle();// Primitive ramps — :root block in <style id="x-palette">inject(XPaletteService).setPalette('blue');

docs:styles.caption.curated-palettes

docs:styles.caption.nature-palettes

docs:styles.caption.branding-palettes

docs:styles.caption.utility-palettes

docs:styles.caption.brand-spectrum

docs:styles.caption.custom-palettes docs:styles.link.theme-builderdocs:styles.caption.custom-palettes-suffix

import { provideXPalettes } from '@xngui/theme';export const appConfig = {  providers: [    provideXPalettes([      {        id: 'brand',        label: 'Brand',        description: 'Company primary ramp.',        icon: '🎨',        tokens: {          'x-primary-500': 'oklch(0.55 0.14 250)',          'x-primary-600': 'oklch(0.48 0.16 250)',        },      },    ]),  ],};

import { XPaletteService } from '@xngui/theme';const palettes = inject(XPaletteService);palettes.registerPalette({  id: 'brand',  label: 'Brand',  description: 'Runtime palette.',  icon: '🎨',  tokens: { '--x-primary-500': 'oklch(0.55 0.14 250)' },});palettes.setPalette('brand');