Skip to content
This repository was archived by the owner on Feb 3, 2024. It is now read-only.

Commit 48978ef

Browse files
DylanVannDylanVann
committed
fixes things
1 parent 37c9adc commit 48978ef

17 files changed

Lines changed: 1742 additions & 284 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
# 🌚🌝 Perfect Color Mode
22

3-
Perfect color mode implementation.
4-
53
- No flicker.
6-
- Framework agnostic (easily supports React/Vue/Svelte).
4+
- Framework agnostic, supports **React** | **Vue** | **Svelte** | etc.
75
- Supports SSR.
86
- Supports no-js.
97
- Tiny - 498B gzipped.
@@ -21,6 +19,7 @@ A class indicating the color mode will be added to `<html>` (e.g. `dark` or `lig
2119
This is done before the rest of your page is rendered (that's why it needs to be in head).
2220

2321
To style your color modes you can use CSS variables, e.g.
22+
You can add `@media (prefers-color-scheme: dark/light)` queries to support users with JS disabled.
2423

2524
```css
2625
@media (prefers-color-scheme: dark) {
@@ -59,12 +58,10 @@ In the rest of your app use `--color` and `--background` as needed.
5958

6059
- You can `subscribe` to the mode, this can be used for rendering a toggle component.
6160
- The first call of your listener is synchronous so you can get the value before rendering.
62-
- You can `get` the mode if you want a more convenient way to synchronously get the mode
6361

6462
```js
6563
const { mode } = window.__perfect_color_mode__
6664
const unsubscribe = mode.subscribe((v) => console.log(v))
67-
const currentMode = mode.get()
6865
```
6966

7067
**Setting:**

‎dist/index.js‎

Lines changed: 2 additions & 89 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js.map‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎example.html‎

Lines changed: 0 additions & 134 deletions
This file was deleted.

‎example.pug‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎examples/vanilla/features.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
- No flicker.
2+
- Framework agnostic, supports **React** | **Vue** | **Svelte** | etc.
3+
- Supports SSR.
4+
- Supports no-js.
5+
- Tiny - 498B gzipped.
6+
- Supports `prefers-color-scheme`.
7+
- Listens for changes to `prefers-color-scheme`.
8+
- Allows user to override and save their preference to `localStorage`.
9+
- Allows clearing the saved preference and falling back to `prefers-color-scheme`.
10+
- Built for the web.

‎examples/vanilla/index.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@media (prefers-color-scheme: dark) {
2+
:root {
3+
--color: white;
4+
--background: black;
5+
}
6+
}
7+
8+
@media (prefers-color-scheme: light) {
9+
:root {
10+
--color: black;
11+
--background: white;
12+
}
13+
}
14+
15+
:root.light {
16+
--color: black;
17+
--background: white;
18+
}
19+
20+
:root.dark {
21+
--color: white;
22+
--background: black;
23+
}
24+
25+
:root {
26+
color: var(--color);
27+
background: var(--background);
28+
font-family: sans-serif;
29+
transition: all 0.5s;
30+
}
31+
32+
body {
33+
max-width: 60ch;
34+
margin: 0 auto;
35+
}

0 commit comments

Comments
 (0)