Theming

Dark / light / auto

auto (default) follows the operating system. The choice is saved per browser (disable with persist: false).

      Orion.theme.setMode('dark');        // 'light' | 'dark' | 'auto'
      Orion.theme.toggle();               // light ⇄ dark
      Orion.theme.cycle();                // light → dark → auto
      Orion.theme.resolved;               // 'light' | 'dark' (what is displayed)
      Orion.on('theme', e => console.log(e.mode, e.resolved));
    

Set the initial mode without JavaScript flashes with <html data-theme="dark"> or <script src="orion.js" data-theme="dark">.

Scoped themes

Add .o-theme-dark or .o-theme-light to any element to theme only that area, for example a dark sidebar on a light page. Floating panels opened from inside it inherit the scope.

Brand colors at runtime

Orion.theme.set() changes tokens live. Readable text colors (--o-on-*) and hover shades are derived automatically.

Multi-tenant & white-label

Register named themes (tokens, branding, default mode) and switch between them. Elements marked with data-o-brand="name" / data-o-brand="logo" are updated automatically, as are the favicon and title.

      Orion.theme.register('acme', {
        primary: '#e11d48', radius: '4px', font: 'Inter, sans-serif', mode: 'light',
        brand: { name: 'ACME Corp', logo: '/acme.svg', logoDark: '/acme-white.svg', favicon: '/acme.ico', title: 'ACME Admin' }
      });
      Orion.theme.use('acme');           // persisted; Orion.theme.reset() to clear
    

High contrast & font size

High contrast strengthens borders, muted text and focus rings (it also follows prefers-contrast: more). The font scale resizes every rem-based size.

      Orion.theme.setContrast(true);
      Orion.theme.setFontScale(1.125);   // 0.75 – 1.5
    

Design tokens

Override tokens in your CSS (:root { --o-primary: … }) or with Orion.theme.set(). Semantic colors have derived variants: -hover, -subtle, -border, -text and --o-on-*.

API