Theme System — Dark, Light & Cyberpunk Modes

📘 General • javascript • v1 •

Flowork supports multiple UI themes managed by the ui.js Pinia store. Themes use CSS variables for colors, backgrounds, and effects. The current theme is persisted in localStorage.

Theme Architecture

Flowork uses CSS custom properties (variables) for theming. Every color, background, and border is defined as a variable on :root, making theme switching instant.

Available Themes

Dark (Default)

  • Deep black background (#020204)
  • Purple accents (#B794F6)
  • Glassmorphism panels

Light

  • Clean white background (#f8fafc)
  • Deep purple accents (#7C3AED)
  • Subtle shadows instead of glow

Cyberpunk

  • Neon green accents
  • Matrix-style effects
  • High contrast

How Theme Switching Works

1. User clicks theme toggle in UI 2. Pinia store updates the theme value 3. data-theme attribute set on element 4. CSS variables instantly update all colors 5. Theme saved to localStorage for persistence

SSR Theme Sync

To prevent a "flash of wrong theme" on page load, SSR pages include an inline script in that reads localStorage and applies the theme before CSS renders.

INDEXED KEYWORDS:
theme dark-mode light-mode css-variables ui design