https://github.com/seanmcp/dark-mode-toggle-web-component

A simple web component that transforms a checkbox into a dark-mode toggle.
https://github.com/seanmcp/dark-mode-toggle-web-component

dark-mode dark-mode-toggle web-component

Last synced: about 2 months ago
JSON representation

A simple web component that transforms a checkbox into a dark-mode toggle.

• Host: GitHub
• URL: https://github.com/seanmcp/dark-mode-toggle-web-component
• Owner: SeanMcP
• Created: 2023-11-25T12:57:44.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-25T12:58:56.000Z (about 1 year ago)
• Last Synced: 2024-12-06T08:06:33.081Z (about 2 months ago)
• Topics: dark-mode, dark-mode-toggle, web-component
• Language: JavaScript
• Homepage: https://seanmcp.github.io/dark-mode-toggle-web-component/
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dark-Mode Toggle Web Component

A simple web component that transforms a checkbox into a dark-mode toggle.

## Overview

This web component starts with a checkbox child and adds all of the logic for a dark-mode toggle:

- ♿ Respects the user's OS-level dark-mode preference

- 🗃️ Persists preference in local storage

- ✅ Syncs checkbox state with preference

- 🕶️ Adds `[data-dark-mode=true]` attribute to `` element

[Live demo](https://seanmcp.github.io/dark-mode-toggle-web-component)

## Installation

Download the [`dark-mode-toggle.js`](dark-mode-toggle.js) file and add it to

your project, then define the custom element in your JavaScript file:

```js

import DarkModeToggle from "./path/to/dark-mode-toggle.js";

customElements.define(...DarkModeToggle);

```

By default, the tag name is `dark-mode-toggle`. If you would like to use a different tag name, you can import the web-component class directly and use your own:

```js

import { DarkModeToggle } from "./path/to/dark-mode-toggle.js";

customElements.define("your-custom-tag-name", DarkModeToggle);

```

## Usage

Wrap the web component around an `input[type=checkbox]` element:

```html

  

```

Then add CSS styles to the `html` element when dark-mode is enabled:

```css

html[data-dark-mode=true] {

  color-scheme: dark;

}

```

## License

MIT