Skip to content

Commit d5c0484

Browse files
romainmenkeromainmenke
committed
update docs
1 parent 937f53a commit d5c0484

File tree

10 files changed

+142
-92
lines changed

10 files changed

+142
-92
lines changed

‎plugins/postcss-light-dark-function/README.md

Lines changed: 67 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -9,57 +9,91 @@ npm install @csstools/postcss-light-dark-function --save-dev
99
[PostCSS Light Dark Function] lets you use the `light-dark` color function in
1010
CSS, following the [CSS Color 5 Specification].
1111

12-
```pcss
13-
.dark {
14-
color-scheme: dark;
15-
}
12+
Read more about this feature on mdn:
13+
- define the colors for light and dark with [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
14+
- define which elements support light and/or dark with [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme)
1615

17-
.light {
18-
color-scheme: light;
19-
}
16+
With both features combined you can mix and match color-schemes in a single document, while also respecting the user's preferences.
2017

21-
.theme {
18+
```pcss
19+
.foo {
2220
color: light-dark(pink, magenta);
2321
}
2422
25-
.prop {
26-
--theme-color: light-dark(cyan, deepskyblue);
23+
.bar {
24+
--bar: light-dark(cyan, deepskyblue);
2725
}
2826
2927
/* becomes */
3028
31-
.dark {
32-
--csstools-color-scheme--dark: initial;
33-
color-scheme: dark;
34-
}
35-
36-
.light {
37-
--csstools-color-scheme--dark: ;
38-
color-scheme: light;
39-
}
40-
41-
.theme {
29+
.foo {
4230
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink;
4331
color: var(--csstools-light-dark-toggle--0, magenta);
4432
color: light-dark(pink, magenta);
4533
}
4634
47-
.prop {
35+
.bar {
4836
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
49-
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
37+
--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
5038
& * {
5139
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
52-
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
40+
--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
5341
}
5442
}
5543
5644
@supports (color: light-dark(red, red)) {
57-
.prop {
58-
--theme-color: light-dark(cyan, deepskyblue);
45+
.bar {
46+
--bar: light-dark(cyan, deepskyblue);
47+
}
48+
}
49+
```
50+
51+
Declare that your document supports both light and dark mode:
52+
53+
```pcss
54+
:root {
55+
color-scheme: light dark;
56+
}
57+
58+
/* becomes */
59+
60+
:root {
61+
--csstools-color-scheme--dark: ;
62+
color-scheme: light dark;
63+
}@media (prefers-color-scheme: dark) {:root {
64+
--csstools-color-scheme--dark: initial;
5965
}
6066
}
6167
```
6268

69+
Dynamically alter the supported color scheme for some elements:
70+
71+
```pcss
72+
:root {
73+
/* Root only supports light mode */
74+
color-scheme: light;
75+
}
76+
77+
.foo {
78+
/* This element and its children only support dark mode */
79+
color-scheme: dark;
80+
}
81+
82+
/* becomes */
83+
84+
:root {
85+
/* Root only supports light mode */
86+
--csstools-color-scheme--dark: ;
87+
color-scheme: light;
88+
}
89+
90+
.foo {
91+
/* This element and its children only support dark mode */
92+
--csstools-color-scheme--dark: initial;
93+
color-scheme: dark;
94+
}
95+
```
96+
6397
## Usage
6498

6599
Add [PostCSS Light Dark Function] to your project:
@@ -102,45 +136,27 @@ postcssLightDarkFunction({ preserve: false })
102136
```
103137

104138
```pcss
105-
.dark {
106-
color-scheme: dark;
107-
}
108-
109-
.light {
110-
color-scheme: light;
111-
}
112-
113-
.theme {
139+
.foo {
114140
color: light-dark(pink, magenta);
115141
}
116142
117-
.prop {
118-
--theme-color: light-dark(cyan, deepskyblue);
143+
.bar {
144+
--bar: light-dark(cyan, deepskyblue);
119145
}
120146
121147
/* becomes */
122148
123-
.dark {
124-
--csstools-color-scheme--dark: initial;
125-
color-scheme: dark;
126-
}
127-
128-
.light {
129-
--csstools-color-scheme--dark: ;
130-
color-scheme: light;
131-
}
132-
133-
.theme {
149+
.foo {
134150
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink;
135151
color: var(--csstools-light-dark-toggle--0, magenta);
136152
}
137153
138-
.prop {
154+
.bar {
139155
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
140-
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
156+
--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
141157
& * {
142158
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
143-
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
159+
--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
144160
}
145161
}
146162
```

‎plugins/postcss-light-dark-function/docs/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@
2020
[<humanReadableName>] lets you use the `light-dark` color function in
2121
CSS, following the [CSS Color 5 Specification].
2222

23+
Read more about this feature on mdn:
24+
- define the colors for light and dark with [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
25+
- define which elements support light and/or dark with [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme)
26+
27+
With both features combined you can mix and match color-schemes in a single document, while also respecting the user's preferences.
28+
2329
```pcss
2430
<example.css>
2531
@@ -28,6 +34,26 @@ CSS, following the [CSS Color 5 Specification].
2834
<example.expect.css>
2935
```
3036

37+
Declare that your document supports both light and dark mode:
38+
39+
```pcss
40+
<root.css>
41+
42+
/* becomes */
43+
44+
<root.expect.css>
45+
```
46+
47+
Dynamically alter the supported color scheme for some elements:
48+
49+
```pcss
50+
<element.css>
51+
52+
/* becomes */
53+
54+
<element.expect.css>
55+
```
56+
3157
<usage>
3258

3359
<envSupport>

‎plugins/postcss-light-dark-function/test/_tape.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,10 @@ postcssTape(plugin)({
4646
preserve: false,
4747
},
4848
},
49+
'examples/root': {
50+
message: ':root example',
51+
},
52+
'examples/element': {
53+
message: 'element example',
54+
},
4955
});

‎plugins/postcss-light-dark-function/test/examples/element.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
:root {
2+
/* Root only supports light mode */
3+
color-scheme: light;
4+
}
5+
6+
.foo {
7+
/* This element and its children only support dark mode */
8+
color-scheme: dark;
9+
}

‎plugins/postcss-light-dark-function/test/examples/element.expect.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:root {
2+
/* Root only supports light mode */
3+
--csstools-color-scheme--dark: ;
4+
color-scheme: light;
5+
}
6+
7+
.foo {
8+
/* This element and its children only support dark mode */
9+
--csstools-color-scheme--dark: initial;
10+
color-scheme: dark;
11+
}

‎plugins/postcss-light-dark-function/test/examples/example.css

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
.dark {
2-
color-scheme: dark;
3-
}
4-
5-
.light {
6-
color-scheme: light;
7-
}
8-
9-
.theme {
1+
.foo {
102
color: light-dark(pink, magenta);
113
}
124

13-
.prop {
14-
--theme-color: light-dark(cyan, deepskyblue);
5+
.bar {
6+
--bar: light-dark(cyan, deepskyblue);
157
}

‎plugins/postcss-light-dark-function/test/examples/example.expect.css

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,20 @@
1-
.dark {
2-
--csstools-color-scheme--dark: initial;
3-
color-scheme: dark;
4-
}
5-
6-
.light {
7-
--csstools-color-scheme--dark: ;
8-
color-scheme: light;
9-
}
10-
11-
.theme {
1+
.foo {
122
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink;
133
color: var(--csstools-light-dark-toggle--0, magenta);
144
color: light-dark(pink, magenta);
155
}
166

17-
.prop {
7+
.bar {
188
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
19-
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
9+
--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
2010
& * {
2111
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
22-
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
12+
--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
2313
}
2414
}
2515

2616
@supports (color: light-dark(red, red)) {
27-
.prop {
28-
--theme-color: light-dark(cyan, deepskyblue);
17+
.bar {
18+
--bar: light-dark(cyan, deepskyblue);
2919
}
3020
}

‎plugins/postcss-light-dark-function/test/examples/example.preserve-false.expect.css

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
1-
.dark {
2-
--csstools-color-scheme--dark: initial;
3-
color-scheme: dark;
4-
}
5-
6-
.light {
7-
--csstools-color-scheme--dark: ;
8-
color-scheme: light;
9-
}
10-
11-
.theme {
1+
.foo {
122
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink;
133
color: var(--csstools-light-dark-toggle--0, magenta);
144
}
155

16-
.prop {
6+
.bar {
177
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
18-
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
8+
--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
199
& * {
2010
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
21-
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
11+
--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
2212
}
2313
}

‎plugins/postcss-light-dark-function/test/examples/root.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
color-scheme: light dark;
3+
}

‎plugins/postcss-light-dark-function/test/examples/root.expect.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:root {
2+
--csstools-color-scheme--dark: ;
3+
color-scheme: light dark;
4+
}@media (prefers-color-scheme: dark) {:root {
5+
--csstools-color-scheme--dark: initial;
6+
}
7+
}

0 commit comments

Comments
 (0)