GoogleChromeLabs/dark-mode-toggle

Health v2 · maintenance only

Adoption not part of the score

1225 stars · 75 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded

A web component (custom element) called <dark-mode-toggle> that adds a dark mode toggle or switch to any website. It respects the user's prefers-color-scheme system preference while allowing per-site overrides, optionally persisted.

Use cases

• add a dark mode toggle to my website
• let users switch between light and dark themes
• respect prefers-color-scheme but allow manual override
• remember a user's theme choice across visits
• conditionally load light and dark stylesheets
• avoid theme flashing on page load

When to choose

• you want a drop-in, framework-agnostic web component for theme switching
• your site organizes CSS into light/dark stylesheets loaded via media queries
• you need to persist user theme preference in localStorage
• you value a small, performance-optimized solution from a trusted source

When to avoid

• your site uses a framework with its own built-in theming solution
• you need server-side theme rendering or cookie-based persistence
• you don't use web components and prefer a plain JS or CSS-only approach
• you need complex multi-theme (beyond light/dark) support

Facets

library · maturity stable

ui-components frontend-framework theme web-development frontend web-design accessibility browser web-components custom-elements dark-mode prefers-color-scheme theme-switcher web-server

Member repositories

For agents

markdown · JSON · MCP: product_card(name="GoogleChromeLabs/dark-mode-toggle")