Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chrisburnell/theme-selector
A Web Component to set a site-wide theme preference using a native select element, saved to local storage.
https://github.com/chrisburnell/theme-selector
component components custom-element custom-elements customelement customelements web-component web-components webcomponent webcomponents
Last synced: 3 days ago
JSON representation
A Web Component to set a site-wide theme preference using a native select element, saved to local storage.
- Host: GitHub
- URL: https://github.com/chrisburnell/theme-selector
- Owner: chrisburnell
- License: mit
- Created: 2024-01-04T11:48:04.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-18T20:40:47.000Z (7 months ago)
- Last Synced: 2024-09-21T02:31:15.281Z (6 days ago)
- Topics: component, components, custom-element, custom-elements, customelement, customelements, web-component, web-components, webcomponent, webcomponents
- Language: HTML
- Homepage: https://chrisburnell.github.io/theme-selector/demo.html
- Size: 20.5 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `theme-selector`
A Web Component for setting a website theme using a select element.
**[Demo](https://chrisburnell.github.io/theme-selector/demo.html)** | **[Further reading](https://chrisburnell.com/theme-selector/)**
## Examples
General usage example:
```html
Light
Dark
theme-selector:not(:defined) {
display: none;
}
```
Example using a custom storage key:
```html
Light
Dark
theme-selector:not(:defined) {
display: none;
}
```
Example using a custom dark theme key:
```html
Black on White
White on Black
theme-selector:not(:defined) {
display: none;
}
```
Example with a custom transition class and duration to keep the class applied:
```html
Light
Dark
theme-selector:not(:defined) {
display: none;
}
```
Example targeting a specific element to apply the theme to:
```html
Light
Dark
theme-selector:not(:defined) {
display: none;
}
```
## Features
This Web Component allows you to use a select element to control user-preferred theming across your website by setting a data attribute against the root element (or a defined selector query). Additionally saves the preference to local storage so that it can be applied on new page loads and maintained between user visits.
## Installation
You have a few options (choose one of these):
1. Install via [npm](https://www.npmjs.com/package/@chrisburnell/theme-selector): `npm install @chrisburnell/theme-selector`
1. [Download the source manually from GitHub](https://github.com/chrisburnell/theme-selector/releases) into your project.
1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
### Usage
Make sure you include the `` in your project (choose one of these):
```html
<!-- Host yourself -->
<script type="module" src="theme-selector.js">
```
```html
```
```html
```
## Credit
With thanks to the following people:
- [David Darnes](https://darn.es) for creating this [Web Component repo template](https://github.com/daviddarnes/component-template)
- [Andy Bell](https://piccalil.li/) for writing the article, [Create a user controlled dark or light mode](https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/), which served as the initial inspiration and basis for building my own theming setup and eventually became this Web Component