fixes things

DylanVann · Oct 10, 2020 · 48978ef · 48978ef
1 parent 37c9adc
commit 48978ef
Show file tree

Hide file tree

Showing 17 changed files with 1,742 additions and 284 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,7 @@
 # 🌚🌝 Perfect Color Mode
 
-Perfect color mode implementation.
-
 - No flicker.
-- Framework agnostic (easily supports React/Vue/Svelte).
+- Framework agnostic, supports **React** | **Vue** | **Svelte** | etc.
 - Supports SSR.
 - Supports no-js.
 - Tiny - 498B gzipped.
@@ -21,6 +19,7 @@ A class indicating the color mode will be added to `<html>` (e.g. `dark` or `lig
 This is done before the rest of your page is rendered (that's why it needs to be in head).
 
 To style your color modes you can use CSS variables, e.g.
+You can add `@media (prefers-color-scheme: dark/light)` queries to support users with JS disabled.
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -59,12 +58,10 @@ In the rest of your app use `--color` and `--background` as needed.
 
 - You can `subscribe` to the mode, this can be used for rendering a toggle component.
 - The first call of your listener is synchronous so you can get the value before rendering.
-- You can `get` the mode if you want a more convenient way to synchronously get the mode
 
 ```js
 const { mode } = window.__perfect_color_mode__
 const unsubscribe = mode.subscribe((v) => console.log(v))
-const currentMode = mode.get()
 ```
 
 **Setting:**

diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/example.html b/example.html
diff --git a/example.pug b/example.pug
diff --git a/examples/vanilla/features.md b/examples/vanilla/features.md
@@ -0,0 +1,10 @@
+- No flicker.
+- Framework agnostic, supports **React** | **Vue** | **Svelte** | etc.
+- Supports SSR.
+- Supports no-js.
+- Tiny - 498B gzipped.
+- Supports `prefers-color-scheme`.
+- Listens for changes to `prefers-color-scheme`.
+- Allows user to override and save their preference to `localStorage`.
+- Allows clearing the saved preference and falling back to `prefers-color-scheme`.
+- Built for the web.
diff --git a/examples/vanilla/index.css b/examples/vanilla/index.css
@@ -0,0 +1,35 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color: white;
+    --background: black;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color: black;
+    --background: white;
+  }
+}
+
+:root.light {
+  --color: black;
+  --background: white;
+}
+
+:root.dark {
+  --color: white;
+  --background: black;
+}
+
+:root {
+  color: var(--color);
+  background: var(--background);
+  font-family: sans-serif;
+  transition: all 0.5s;
+}
+
+body {
+  max-width: 60ch;
+  margin: 0 auto;
+}