masader icon indicating copy to clipboard operation
masader copied to clipboard
verified publisher icon ARBML

feat: add dark mode with toggle and localStorage persistence

Open Salah-Sal opened this issue 1 month ago • 0 comments

Feature: Dark Mode

Adds a dark mode toggle with system preference detection and localStorage persistence.

Features

  • Theme Toggle: Sun/moon button in navigation (desktop & mobile)
  • CSS Variables: Complete light/dark theme color system
  • FOUC Prevention: Early theme detection script in <head>
  • Persistence: Remembers user preference via localStorage
  • System Preference: Respects prefers-color-scheme media query
  • Smooth Transitions: CSS transitions between themes

Pages Updated

  • Homepage (table, pagination, expanded rows)
  • Search page (filters, tags, results, pagination)
  • Stats page
  • Card page
  • Changelog page
  • Navigation & Footer

Files Changed

  • assets/css/style.css - Dark mode CSS variables and overrides
  • assets/js/config.js - Theme configuration for charts
  • assets/js/navigation.js - Theme toggle functionality
  • _includes/head.html - Early theme detection script
  • _includes/nav.html - Theme toggle button
  • _includes/footer.html - Theme-aware link colors
  • _pages/*.html - Section gradient classes
  • _layouts/changelog.html - Section gradient class

Testing

  • Tested on Chrome, toggling between light/dark modes
  • Theme persists across page reloads
  • Respects system dark mode preference on first visit Happy to make any adjustments based on feedback!

Salah-Sal avatar Dec 18 '25 19:12 Salah-Sal