Dark Light Theme Switcher

The Dark Light Theme Switcher partial provides a toggle button for switching between dark and light theme modes. It uses moon and sun icons to indicate the current state and target mode. Sun, indicating light mode is the default. When clicking on it the icon will change to a moon and the class dark-theme will be added to the page body.

Manifest

{
  "name": "dark-light-theme-switcher",
  "type": "_partials",
  "styles": ["dark-light-theme-switcher.css"],
  "scripts": ["dark-light-theme-switcher.js"],
  "requires": []
}

Example

Click the theme switcher in the navigation above to see the toggle in action.