style: add dark mode theme with toggle functionality #662
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request adds full support for light and dark themes to the site, including a user-toggleable theme switcher, persistent theme preference, and dynamic styling across all major components. It introduces new SCSS variables and theme-specific styles, updates markup to support theme switching, and adds the necessary JavaScript logic for toggling and storing the user's theme choice.
Theme support and switching:
ThemeTogglebutton (theme-toggle.html) to the site header and implemented its styling and logic, allowing users to switch between light and dark modes and persist their preference inlocalStorage. [1] [2] [3] [4] [5]theme-darkortheme-light) into the HTML root element on page load, based on user preference or system settings, and loaded the theme toggle script in the main HTML head.SCSS and CSS enhancements:
_theme-variables.scssand imported them into the main stylesheet, enabling consistent color management for both themes. [1] [2]_dark-mode.scssto ensure all components and markdown content are visually coherent in dark mode, including overrides for third-party markdown CSS and icon color switching.Visual improvements for theme-specific assets:
Version bump:
package.jsonandpackage-lock.jsonto version 1.1.0 to reflect the addition of theme support. [1] [2]Closes #607