dark-theme mixin
Emits the dark theme token custom properties (--wu-*), including computed text-on-{role} and the error aliases of danger.
The theme already emits these under [data-theme="dark"] and the prefers-color-scheme fallback; use this for a custom scope.
@mixin dark-theme- Output
--wu-* theme token declarations with the dark values (built-in defaults merged with $dark-theme)
Example
.dark-preview { @include dark-theme;}Compiled CSS
.dark-preview { --wu-bg-base: #1a1a1a; --wu-bg-surface: #2e2e2e; --wu-bg-alternate: #242424; --wu-bg-raised: #3a3a3a; --wu-bg-hover: #3a3a3a; --wu-bg-selected: var(--wu-brand-950); --wu-bg-disabled: #333; --wu-text-regular: #f1f1f1; --wu-text-muted: #a8a8a8; --wu-text-subtle: #6e6e6e; --wu-text-inverted: #1a1a1a; --wu-text-link: var(--wu-brand-300); --wu-text-link-hover: var(--wu-brand-200); --wu-border-regular: #474747; --wu-border-strong: var(--wu-gray-500); --wu-border-control: var(--wu-gray-400); --wu-border-control-hover: var(--wu-gray-300); --wu-border-focus: var(--wu-brand-400); --wu-border-focus-width: 2px; --wu-border-focus-offset: 2px; --wu-brand: var(--wu-brand-400); --wu-brand-hover: var(--wu-brand-300); --wu-brand-active: var(--wu-brand-200); --wu-brand-subtle: var(--wu-brand-950); --wu-brand-border: var(--wu-brand-800); --wu-text-brand: var(--wu-brand-300); --wu-success: var(--wu-success-400); --wu-success-hover: var(--wu-success-300); --wu-success-active: var(--wu-success-200); --wu-success-subtle: var(--wu-success-950); --wu-success-border: var(--wu-success-800); --wu-text-success: var(--wu-success-300); --wu-danger: var(--wu-danger-400); --wu-danger-hover: var(--wu-danger-300); --wu-danger-active: var(--wu-danger-200); --wu-danger-subtle: var(--wu-danger-950); --wu-danger-border: var(--wu-danger-800); --wu-text-danger: var(--wu-danger-300); --wu-warning: var(--wu-warning-400); --wu-warning-hover: var(--wu-warning-300); --wu-warning-active: var(--wu-warning-200); --wu-warning-subtle: var(--wu-warning-950); --wu-warning-border: var(--wu-warning-800); --wu-text-warning: var(--wu-warning-300); --wu-info: var(--wu-info-400); --wu-info-hover: var(--wu-info-300); --wu-info-active: var(--wu-info-200); --wu-info-subtle: var(--wu-info-950); --wu-info-border: var(--wu-info-800); --wu-text-info: var(--wu-info-300); --wu-gray-subtle: var(--wu-gray-950); --wu-gray-border: var(--wu-gray-800); --wu-text-gray: var(--wu-gray-300); --wu-red-subtle: var(--wu-red-950); --wu-red-border: var(--wu-red-800); --wu-text-red: var(--wu-red-300); --wu-blue-subtle: var(--wu-blue-950); --wu-blue-border: var(--wu-blue-800); --wu-text-blue: var(--wu-blue-300); --wu-green-subtle: var(--wu-green-950); --wu-green-border: var(--wu-green-800); --wu-text-green: var(--wu-green-300); --wu-yellow-subtle: var(--wu-yellow-950); --wu-yellow-border: var(--wu-yellow-800); --wu-text-yellow: var(--wu-yellow-300); --wu-purple-subtle: var(--wu-purple-950); --wu-purple-border: var(--wu-purple-800); --wu-text-purple: var(--wu-purple-300); --wu-pink-subtle: var(--wu-pink-950); --wu-pink-border: var(--wu-pink-800); --wu-text-pink: var(--wu-pink-300); --wu-text-on-brand: #1a1a1a; --wu-text-on-success: #1a1a1a; --wu-text-on-danger: #1a1a1a; --wu-text-on-warning: #1a1a1a; --wu-text-on-info: #1a1a1a; --wu-error: var(--wu-danger); --wu-error-hover: var(--wu-danger-hover); --wu-error-active: var(--wu-danger-active); --wu-error-subtle: var(--wu-danger-subtle); --wu-error-border: var(--wu-danger-border); --wu-text-error: var(--wu-text-danger); --wu-text-on-error: var(--wu-text-on-danger); --wu-tooltip--Background: var(--wu-text-regular); --wu-tooltip--Color: var(--wu-text-inverted);}