Skip to content

Add persisted light/dark theme toggle

Emil Saji requested to merge feature/dark-mode into main

Add a moon/sun button to the card header that switches the widget between light and dark mode. The choice is stored in chrome.storage.local under theme, synced live across Keka tabs, and applied before the first render so there is no flash. Until the user picks one, it follows the OS prefers-color-scheme.

  • settings.js: loadTheme / saveTheme / onThemeChange
  • main.js: load the saved theme at start and react to changes from other tabs
  • ui.js: move hardcoded colours into CSS variables, add the dark palette, header theme button with aria-pressed/labels
  • ui.js: derive --brand-soft from Keka's primary colour instead of its --primary-color-light, which can be dark and made the Plan "Today" strip and header badge unreadable in light mode
  • README: document the toggle, permissions and file table

Merge request reports