feat: add dark mode with toggle and localStorage persistence #450

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Open

Salah-Sal wants to merge 1 commit into ARBML:main from Salah-Sal:feature/dark-mode

Salah-Sal commented Dec 18, 2025

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!


          feat: add dark mode with toggle and localStorage persistence

2d4c336

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet