@whitekiwi/tokens 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,7 +49,7 @@ body {
|
|
|
49
49
|
For an unbundled page, copy the exported CSS to your public assets and load it
|
|
50
50
|
with a stylesheet link. Browsers do not resolve npm package names themselves.
|
|
51
51
|
|
|
52
|
-
## Light, dark, or
|
|
52
|
+
## Light, dark, or auto
|
|
53
53
|
|
|
54
54
|
Set the theme on the root `<html>` element:
|
|
55
55
|
|
|
@@ -57,12 +57,15 @@ Set the theme on the root `<html>` element:
|
|
|
57
57
|
| --- | --- |
|
|
58
58
|
| Light | `<html data-theme="light">` |
|
|
59
59
|
| Dark | `<html data-theme="dark">` |
|
|
60
|
-
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
60
|
+
| Auto | `<html>` with no `data-theme` attribute |
|
|
61
|
+
|
|
62
|
+
Auto removes the attribute. `data-theme="auto"` does **not** select a theme.
|
|
63
|
+
Colors follow `prefers-color-scheme` only when the attribute is absent. Apply a
|
|
64
|
+
saved `light` or `dark` value before first paint to avoid a flash. The app
|
|
65
|
+
chooses the localStorage key and stores only those two values. The early
|
|
66
|
+
`pip-theme-bootstrap` script and `ThemeControl` live in
|
|
67
|
+
[@whitekiwi/ui](../ui/README.md#screen-theme). This package still has no
|
|
68
|
+
JavaScript runtime.
|
|
66
69
|
|
|
67
70
|
## Use roles, not raw colors
|
|
68
71
|
|