Dynamic Variable Multi-Theme Dashboard

This is a Dynamic Variable Multi-Theme Dashboard. It orchestrates entire UI shifts by remapping root-level CSS custom properties to predefined theme palettes. Its function is to provide a seamless visual state manager for applications requiring multiple aesthetic environments without reloading the DOM.

Specs

• Weight: ~8 KB (Code only). Zero external framework dependencies.
• Performance: High. State changes are handled via setProperty(), triggering single-frame CSS updates across all inherited nodes.
• Theming / Customization: Highly extensible. New themes can be added by declaring a new variable set in :root and adding the key to the JS themes array.
• Responsiveness: Native. Utilizes CSS Grid for the theme selection matrix and clamp() for fluid typography.
• Graceful Degradation: Fails to the default ‘Dark’ theme if JavaScript is disabled. The UI remains functional but static.

Anatomy

The component functions as a central hub for environmental data.

• HTML (The Skeleton): A Pug-rendered interface featuring a main .c-card container. It houses an interactive .c-theme button (the “icon reel”) and a dynamic .c-theme-grid where individual theme previews are injected.
• CSS (The Skin): A sophisticated variable mapping system. It defines two sets of properties: the “semantic” aliases (e.g., --bg, --text-primary) and the “hard” theme values (e.g., --sunset-bg). Remapping happens at the :root level.
• JS (The Nervous System): The logic controller. It manages the changeTheme() function, which simultaneously updates the global CSS variables, toggles active classes on preview boxes, and handles the precise vertical translation of the icon reel.

Logic

The core mechanism is “Semantic Property Aliasing”.

document.documentElement.style.setProperty('--bg', `var(--${theme}-bg)`);

Instead of hardcoding colors in JavaScript, the script serves as a router. It takes a theme string (like sunset) and points the semantic CSS variable (--bg) to the corresponding theme-specific variable (--sunset-bg). This allows the stylesheet to handle all rendering logic, keeping the JavaScript light and agnostic of the actual visual values.

Feel

Frictionless and responsive. Clicking “Cycle Theme” feels like rotating a physical dial; the icon reel slides vertically to match the new state, and the entire interface updates with 120ms transitions. The presence of swatches within each selection box provides a “low-latency” preview of the intended environment, creating a sense of total control over the digital workspace.