https://github.com/cdransf/theme-toggle
A web component that simplifies controlling light/dark theming for a site.
https://github.com/cdransf/theme-toggle
javascript webcomponent webcomponents
Last synced: 12 months ago
JSON representation
A web component that simplifies controlling light/dark theming for a site.
- Host: GitHub
- URL: https://github.com/cdransf/theme-toggle
- Owner: cdransf
- License: mit
- Created: 2024-02-28T16:26:10.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-31T00:03:22.000Z (over 1 year ago)
- Last Synced: 2025-04-12T02:05:32.783Z (12 months ago)
- Topics: javascript, webcomponent, webcomponents
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@cdransf/theme-toggle
- Size: 24.4 KB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# `` web component
A web component that simplifies controlling light/dark theming for a site.
```sh
npm i @cdransf/theme-toggle
```
---
## Example usage
Add the `theme-load.js` to your document `` to prevent an unthemed flash on load. This ensures access to the `document`.
```html
```
**Optional attributes:**
- **mode:** accepts either `control` or `toggle` and defaults to `toggle`. If `toggle` is set, you can add `` and allow the user to cycle back to their system preference.
- **storage:** sets the storage API to be used. Defaults to `sessionStorage`, but can also be set to "`local` for `localStorage`.
- Add the `theme-toggle.js` to your markup, set your template.
- Add `` to your site's header.
- Use `light-dark` to define your preferred colors for each scheme.
[Refer to MDN for documentation on CSS light-dark().](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)