You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+19-15Lines changed: 19 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,11 +53,11 @@ module.exports = {
53
53
54
54
## Design Decisions
55
55
56
-
You might have noticed a couple of opinionated code at the top of this document. These are extracted from my work, and currently serve my use cases very well. Should you have concerns, suggestions for improvements, or solution for making this more generic, feel free to open an issue. Thanks!
56
+
You might have noticed a couple of opinionated code at the top of this document. These are extracted from my daily work, and currently serve my use cases very well. Should you have concerns, suggestions for improvements, or solution for making this more generic, feel free to open an issue. Thanks!
57
57
58
58
1. Rely on `data-color-scheme` for explicit theme settings. This requires setting `data-color-scheme` on the root html element.
59
59
60
-
2. Provide fallback to when user has not explicitly select a theme. Let's refer to the demo above, with rules enumerated:
60
+
2. Provide fallback when user has not explicitly select a theme. Let's refer to the demo above, with rules enumerated:
61
61
62
62
```css
63
63
/* (1) */
@@ -78,7 +78,7 @@ You might have noticed a couple of opinionated code at the top of this document.
78
78
}
79
79
```
80
80
81
-
Imagine your system provides 3 options: `dark`, `light`, and `system` (default). There are 4 possible scenarios.
81
+
Imagine your system provides 3 options: `dark`, `light`, and `system` (default, auto, i.e respect system preferences). There are 4 possible scenarios.
82
82
83
83
1. User has not explicitly selected a theme (theme = `system`), and the system prefers `light` (`prefers-color-scheme` = `light`):
84
84
@@ -104,7 +104,7 @@ You might have noticed a couple of opinionated code at the top of this document.
104
104
B --> Dark
105
105
A -->|No| C[prefers-color-scheme?]
106
106
C -->Light
107
-
C --->Dark
107
+
C -->Dark
108
108
```
109
109
110
110
## Supported At Rules
@@ -147,18 +147,19 @@ The following table lists test cases covered by this plugin, please refer to [te
147
147
| --- | --- | --- | --- |
148
148
| nest in other media queries |`@media (min-width: 768px) { .my-class { @dark { color: white } } }`|[input][tests.in-media-queries.input]|[output][tests.in-media-queries.output]|
149
149
| with combined selector |`.my-class, .others { @dark { color: white } }`|[input][tests.with-combined-selector.input]|[output][tests.with-combined-selector.output]|
150
+
| with selector at `html`| `` |[input][tests.with-selector-at-html.input]|[output][tests.with-selector-at-html.output]|
150
151
| with [postcss-nesting]|`.my-class { & .nested { @dark { color: white } } }`|[input][tests.with-postcss-nesting.input]|[output][tests.with-postcss-nesting.output]|
151
152
| with [postcss-nested]|`.my-class { .nested { @dark { color: white } } }`|[input][tests.with-postcss-nested.input]|[output][tests.with-postcss-nested.output]|
152
153
153
-
## Tailwind Support
154
+
## [Tailwind] Support
154
155
155
156
Make sure you have installed and configured `tailwindcss`.
156
157
157
158
```bash
158
159
npm install --save-dev tailwindcss
159
160
```
160
161
161
-
Add `postcss-color-scheme` to your tailwind config as a plugin, and turn off the default `darkMode` handling.
162
+
Add `postcss-color-scheme` to your [tailwind] config as a plugin, and turn off the default `darkMode` handling.
162
163
163
164
```js
164
165
/**@type{import("tailwindcss").Config }*/
@@ -176,19 +177,22 @@ Now, the following is available:
0 commit comments