# GoogleChromeLabs/dark-mode-toggle

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:

Repository: https://github.com/GoogleChromeLabs/dark-mode-toggle
Canonical: https://ross.abutalabs.com/products/dark-mode-toggle
Homepage: https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html
Language: JavaScript
License: Apache-2.0
License Family: permissive
Topics: dark-mode, dark-theme, dark-mode-switcher, dark-mode-toggle, dark-theme-switcher, dark-theme-toggle, prefers-color-scheme, web-components, custom-elements, custom-elements-v1, supported-color, media-queries
Last push: 2026-08-05T15:31:16+00:00

## Health v2 (maintenance only)
Score: 73/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 96, release rhythm 28, longevity 100
- inputs: {"age_days": 2637, "days_push": 28, "days_rel": 264, "gap_med": 212, "n_releases_24m": 4}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1225, forks 75 (observed 2026-08-28T04:04:02.962361+00:00)

## What it is
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
- artifact type: library
- maturity: stable
- function: ui-components, frontend-framework, theme
- domain: web-development, frontend, web-design, accessibility
- platform: browser
- tags: web-components, custom-elements, dark-mode, prefers-color-scheme, theme-switcher, web-server

## Member repositories
- GoogleChromeLabs/dark-mode-toggle (main) score 73

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:04:02.962361+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T06:15:22.147936+00:00, confidence not recorded.
  - readme: https://github.com/GoogleChromeLabs/dark-mode-toggle (fetched 2026-08-28T04:04:02.962361+00:00, sha f541b4eb18ab)
  - homepage: https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html (fetched 2026-08-29T12:23:15.700376+00:00, sha 9711a1344800)
  - registry_npm: https://registry.npmjs.org/dark-mode-toggle (fetched 2026-08-29T12:23:15.709272+00:00, sha dd687b484f8a)
- Data as of 2026-08-30T08:39:29.467469+00:00.