Framework

Theme Setup

Themes werden als CSS-Dateien eingebunden. In der Doku kann zwischen Shield und Horizon direkt umgeschaltet werden.

<link id="theme-link" rel="stylesheet" href="@shield/tokens/shield-theme.css" />

Installation

Installiere fuer das Theme Setup das Tokens-Paket:

pnpm npm

pnpm add @shield/tokens

npm i @shield/tokens

Theme Switching

Theme-Wechsel sollte ohne Reload funktionieren und den aktuellen Zustand in Local Storage speichern.

Mode Switch (Light/Dark)

Der Mode wird ueber data-mode am Root-Element gesteuert. In der Docs-App wird der Wert als demo-mode in Local Storage gespeichert und beim Laden wieder angewendet.

CSS-Selector fuer Dark Mode: [data-mode='dark']. Damit koennen Dark-Overrides zentral gesetzt werden.

[data-mode='dark'] {
  --docs-code-bg: color-mix(in srgb, var(--shield-ui-bg) 50%, black 50%);
  --docs-code-text: var(--shield-ui-text);
  --docs-code-border: var(--shield-ui-border);
}

const root = document.documentElement;

function applyMode(mode) {
  const nextMode = mode === 'dark' ? 'dark' : 'light';
  root.dataset.mode = nextMode;
  root.style.colorScheme = nextMode;
  localStorage.setItem('demo-mode', nextMode);
}

const savedMode = localStorage.getItem('demo-mode') || 'light';
applyMode(savedMode);