A custom element for adding a Dark Mode toggle or switch to websites, respecting user preferences and allowing overrides.
Dark Mode Toggle is a Web Component that provides a ready-to-use UI control for switching between light and dark themes on a website. It solves the problem of implementing a user-friendly dark mode toggle that respects system preferences while allowing per-site overrides. The component handles the logic of reading and writing the user's theme choice, integrating seamlessly with various CSS strategies.
Frontend developers and web designers who need to add a dark mode toggle to their websites without building the UI and state management from scratch. It's particularly useful for those using modern JavaScript and Web Component-friendly projects.
Developers choose Dark Mode Toggle because it's a lightweight, framework-agnostic custom element that follows web standards, offers extensive customization, and handles the complexity of persisting user preferences. It's maintained by Google Chrome Labs and promotes performance best practices like conditional CSS loading.
A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Automatically initializes based on the user's `prefers-color-scheme` setting, ensuring compliance with system-level choices without extra code, as highlighted in the README's philosophy.
The `permanent` attribute allows users to override and remember their theme preference in localStorage, enhancing control and reducing friction for return visits.
Offers two visual appearances and can be styled via CSS custom properties and `::part()` selectors, with numerous variables demonstrated in the demo's CSS source code.
Encourages conditional loading of CSS files to avoid downloading unused styles, aligning with best practices for reducing critical rendering path bloat.
Admits potential flashing issues when stylesheets load asynchronously, requiring an additional loader script to mitigate, as noted in issue #77 and the README.
Only supports light and dark modes out-of-the-box, lacking built-in functionality for additional color schemes or gradients, which may require manual extension.
May not seamlessly integrate with all frontend frameworks or require polyfills for older browsers, adding setup complexity compared to native framework components.