Docs / Components
SenseThemeScopeDirective
Scope light or dark design tokens to a DOM subtree via data-theme and optional --sense-color-* overrides from @artificialsenselabs/ui.
Live demo: run nx serve showcase and open /components/theming (port 4202).
Overview
Category: Theming. Selector: [senseThemeScope]. Import: import { SenseThemeScopeDirective } from '@artificialsenselabs/ui';
String presets ('light' / 'dark') stamp data-theme and CSS color-scheme on the host. Token redefinition lives in @artificialsenselabs/tokens under [data-theme='dark']. Config objects can add typed colors or raw variables that write --sense-color-* on the same host. App-wide theme switching still belongs on <html> — this directive is for local islands only.
Accessibility
- Applies token overrides without altering document reading order.
- Sets CSS
color-schemealongsidedata-themeso native controls match the scoped scheme. - Dark islands work via token modes. Forcing a light island under a dark OS still depends on the app’s root token baseline — there is no separate high-contrast preset on this directive.