/**
- Dark Mode Toggle 2
- Copyright 2024 by James Baduor
- Released on: August 26, 2024
- Forked from: https://github.com/timothydesign/scripts/blob/main/dark-mode-toggle.js
- Original Copyright 2023 by Timothy Ricks
- Released under the MIT License
- Released on: November 28, 2023
- This script provides advanced dark mode functionality, including:
-
- Persistent theme preference storage
-
- Automatic theme switching based on system preferences
-
- Dynamic asset switching for different theme modes
-
- SEO-friendly image handling for theme-specific assets
- Key features:
-
- Theme-aware image switching:
-
- Automatically switches image sources based on the current theme
-
- Supports different image assets for light and dark modes
-
- Enhances user experience by providing theme-appropriate visuals
-
- SEO optimization for images:
-
- Utilizes the
data-light-src
anddata-dark-src
attributes for theme-specific images
- Utilizes the
-
- Allows search engines to index both light and dark mode images
-
- Improves accessibility and SEO performance
- Usage:
-
- Add
class="theme-asset"
to images that should change based on theme
- Add
-
- Use
data-light-src
for the light mode image source
- Use
-
- Use
data-dark-src
for the dark mode image source
- Use
- Example:
- <img class="theme-asset"
-
data-light-src="/path/to/light-image.jpg"
-
data-dark-src="/path/to/dark-image.jpg"
-
alt="Theme-aware image">
*/