Orqestria Download
← Back to Frontend and design systems

Skill · Version 1.0.0

Multiple brands and dark mode

Creates consistent theme switching through semantic colors and native browser integration rather than separate fragile component styles.

multi-brand-dark-mode

Team members using this skill

See how it helps

When is it useful?

Use it when supporting several brands or dark mode exposes unreadable controls, missing artwork or incorrect first-paint colors.

What does it help you do?

  • Maps semantic tokens across brands and light or dark themes.
  • Coordinates native controls and first-paint theme selection.
  • Checks icons, illustrations and forced-color visibility.

Try asking this

Add dark mode without invisible logos or a white flash during reload. Reload directly into dark mode and inspect logos, inputs and focus indicators. The first frame and native controls should match the selected theme.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Multi-Brand & Dark Mode Architecture

Dark mode and multi-brand theming are not achieved by scattering .dark .card { background: #111 } overrides across hundreds of component files. Build theming on semantic token remapping so components remain completely theme-agnostic.

1. Semantic Token Remapping (Single Component Stylesheet)

A component should reference background: var(--bg-surface-raised); color: var(--text-primary); border-color: var(--border-subtle); once, while theme scopes (:root, [data-theme="dark"], @media (prefers-color-scheme: dark), [data-brand="..."]) redefine the semantic token values:

  • Elevation in Dark Mode vs. Light Mode:
    • In light mode, elevation is primarily communicated through drop shadows against a light canvas.
    • In dark mode, black drop shadows are nearly invisible against a dark canvas; communicate elevation by making higher surfaces progressively lighter (--bg-canvas: #0b0d12 -> --bg-surface: #12161f -> --bg-surface-raised: #1a202c -> --bg-surface-overlay: #222938) paired with a subtle top/inner border highlight (--border-subtle).
  • Desaturate Accent & Status Colors for Dark Surfaces:
    • A saturated #dc2626 red or #2563eb blue that passes contrast on white often vibrates harshly and fails 4.5:1 contrast as text on dark backgrounds. Map --status-danger-text, --status-success-text and --accent-text to lighter, slightly desaturated ramps in dark mode.

2. Native Browser Integration (color-scheme)

Always set the CSS color-scheme property (color-scheme: light dark, or color-scheme: dark on [data-theme="dark"]):

  • Ensures native browser scrollbars, form controls (<input type="date">, <select> dropdowns, checkboxes), autofill backgrounds and system fallback backgrounds match the active theme.
  • Prevent Flash of Unstyled/Wrong Theme (FOUC): resolve the persisted theme preference (localStorage) + window.matchMedia('(prefers-color-scheme: dark)') synchronously in <head> before first paint so dark-mode users never see a blinding white flash on reload.

3. Images, Icons, Shadows & Forced-Colors Resilience

  • Icons & SVGs: use fill="currentColor" / stroke="currentColor" on monochrome icons so they inherit semantic text tokens automatically across themes.
  • Logos & illustrations: provide theme-aware variants (<picture> with media="(prefers-color-scheme: dark)" or CSS token variables inside inline SVGs) so dark logos never disappear against dark surfaces.
  • Windows High Contrast / forced-colors: active:
    • Because forced-colors strips box-shadow and background color fills, ensure cards, modals, inputs, toggle switches and active tabs retain a real CSS border or outline (border: 1px solid transparent in standard themes becomes visible automatically in forced-colors mode).

Included files 1

  • SKILL.md