Utilities

Theme Toggle

The .quanta-theme-toggle component lets users switch between light and dark modes. It shows the sun icon in light mode and the moon icon in dark mode, and can be wired to your theme‑switching script.

Markup

Basic structure—place wherever you need the toggle:

<button class="quanta-theme-toggle">
  <span class="icon-sun">...sun svg...</span>
  <span class="icon-moon">...moon svg...</span>
</button>

Behavior

This button simply toggles your application’s data-theme attribute (or CSS class) between "light" and "dark". You can hook it up like so:

Listen for click on .quanta-theme-toggle.
Toggle data-theme on <html> or your container.
The CSS then shows only the appropriate icon.

*Your JS should add/remove* data-theme="dark" or "light" accordingly.

Dark Mode Support

By default, the toggle:

Hides .icon-moon when in light mode
Hides .icon-sun when in dark mode

Just ensure your root HTML has data-theme="dark" in dark mode.