Refactor theme management: streamline theme application and toggle logic #180
Conversation
|
🚀 Draft Preview: https://pr180-draft.lc0.org/ |
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the theme management system to use a data-attribute-based approach instead of CSS classes. The changes streamline theme application logic and implement a three-state toggle (light → dark → system) that respects user preferences while maintaining localStorage persistence.
Key Changes:
- Replaced class-based theme switching (
.theme-light,.theme-dark) with data-attribute approach (data-theme='light',data-theme='dark') - Consolidated theme variables into a centralized palette structure with explicit light/dark prefixes
- Implemented helper functions (
applyTheme,saveTheme) to reduce code duplication in theme toggle logic
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| themes/leela/assets/js/main.js | Refactored theme toggle logic to use data attributes and extracted reusable functions for applying and saving themes |
| themes/leela/assets/css/syntax.css | Updated dark mode media query selector to match new data-attribute approach |
| themes/leela/assets/css/main.css | Restructured CSS variables into a centralized palette with light/dark prefixes and updated selectors to use data attributes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| htmlEl.classList.add("theme-light"); | ||
| localStorage.setItem("theme", "light"); | ||
| themeIcon.className = "ri--sun-line"; | ||
| const currentTheme = htmlEl.getAttribute("data-theme"); |
There was a problem hiding this comment.
The variable currentTheme is declared but never used. Since the toggle logic only relies on savedTheme, this line should be removed to avoid confusion.
| const currentTheme = htmlEl.getAttribute("data-theme"); |
1 participant
No description provided.