File tree 2 files changed +8
-7
lines changed
2 files changed +8
-7
lines changed Original file line number Diff line number Diff line change 3
3
# ` <dark-mode-toggle> ` Element
4
4
5
5
A custom element that allows you to easily put a * Dark Mode 🌒* toggle
6
- or switch on your site and that adds
7
- [ ` prefers-color-scheme ` ] ( https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme )
8
- support even to browsers that don't support the media feature natively.
6
+ or switch on your site, so you can initially adhere to your users' preferences according to
7
+ [ ` prefers-color-scheme ` ] ( https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme ) ,
8
+ but also allow them to (optionally permanently) override their system setting for just your site.
9
+
10
+ 📚 Read all(!) about dark mode in the related article
11
+ [ Hello Darkness, My Old Friend] ( https://web.dev/prefers-color-scheme/ ) .
9
12
10
13
## Installation
11
14
@@ -20,14 +23,12 @@ In the browser:
20
23
``` js
21
24
import * as DarkModeToggle from ' https://cdn.pika.dev/dark-mode-toggle' ;
22
25
```
23
- or
26
+ or
24
27
25
28
``` js
26
29
import * as DarkModeToggle from ' https://unpkg.com/dark-mode-toggle' ;
27
30
```
28
31
29
-
30
-
31
32
## Usage
32
33
33
34
⚠️ The custom element assumes that you have organized your CSS in different files
Original file line number Diff line number Diff line change 1
1
{
2
2
"name" : " dark-mode-toggle" ,
3
- "version" : " 0.1.0 " ,
3
+ "version" : " 0.1.1 " ,
4
4
"description" : " Web Component that toggles dark mode 🌒" ,
5
5
"main" : " ./src/dark-mode-toggle.mjs" ,
6
6
"browser" : " src/dark-mode-toggle.mjs" ,
You can’t perform that action at this time.
0 commit comments