/
docs.color-schemes.jsx
182 lines (173 loc) · 6.22 KB
/
docs.color-schemes.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
import { useRef } from "react";
import Code from "~/components/Code";
import Heading from "~/components/Heading";
import Content from "~/components/docs/Content";
import EditOnGithub from "~/components/docs/EditOnGithub";
import Header from "~/components/docs/Header";
import TableOfContents from "~/components/docs/TableOfContents";
import ThemeToggle from "~/components/icons/ThemeToggle";
import { usePage } from "~/contexts/PageContext";
import metaData from "~/data/meta";
const { titleSuffix } = metaData;
export const meta = () => [
{ title: `Color schemes ${titleSuffix}` },
{
name: "description",
content:
"Pico CSS comes with both Light and Dark color schemes, automatically enabled based on user preferences.",
},
];
export default function ColorSchemes() {
const { pageTheme, switchTheme } = usePage();
const isThemeDark = pageTheme === "dark";
const changeThemeLabel = isThemeDark ? "Turn off dark mode" : "Turn on dark mode";
const introductionRef = useRef();
const usageRef = useRef();
const exampleRef = useRef();
return (
<>
{/* Header */}
<Header
title="Color schemes"
description="Pico CSS comes with both Light and Dark color schemes, automatically enabled based on user preferences."
/>
{/* Table of content */}
<TableOfContents
data={[
{
anchor: "",
title: "Introduction",
ref: introductionRef,
},
{
anchor: "usage",
title: "Usage",
ref: usageRef,
},
{
anchor: "example",
title: "Card example",
ref: exampleRef,
},
]}
/>
{/* Content */}
<Content>
<section ref={introductionRef}>
<p>
The default color scheme is Light. The Dark scheme is automatically enabled if the user
has dark mode enabled{" "}
<Code display="inline" language="css">{`prefers-color-scheme: dark;`}</Code>.
</p>
<article aria-label="Theme switcher" id="theme-switcher">
<button className="contrast" onClick={switchTheme}>
<ThemeToggle className={`theme-toggle${isThemeDark ? " moon" : ""}`} />
{changeThemeLabel}
</button>
</article>
</section>
<section ref={usageRef}>
<Heading level={2} anchor="usage">
Usage
</Heading>
<p>
Color schemes can be defined for the entire document using{" "}
<Code display="inline">{`<html data-theme="light">`}</Code> or for specific HTML
elements, such as <Code display="inline">{`<article data-theme="dark">`}</Code>.
</p>
<p>
Color schemes at the HTML tag level work great for elements such as <code>a</code>,{" "}
<code>button</code>, <code>table</code>, <code>input</code>, <code>textarea</code>,{" "}
<code>select</code>, <code>article</code>, <code>dialog</code>, <code>progress</code>.
</p>
<p>
CSS variables specific to the color scheme are assigned to every HTML tag. However, we
have not enforced specific background and color settings across all HTML tags to
maintain transparent backgrounds and ensure colors are inherited from the parent tag.
</p>
<p>
For some other HTML tags, you might need to explicitly set <code>background-color</code>{" "}
and <code>color</code>.
</p>
<Code language="css">{`section {
background-color: var(--pico-background-color);
color: var(--pico-color);
}`}</Code>
</section>
<section ref={exampleRef}>
<Heading level={2} anchor="example">
Card example
</Heading>
<article data-theme="light" aria-label="Forced light theme example">
<Heading level={2}>Light card</Heading>
<form>
<fieldset className="grid">
<input
type="text"
name="login"
placeholder="Login"
aria-label="Login"
autoComplete="username"
/>
<input
type="password"
name="password"
placeholder="Password"
aria-label="Password"
autoComplete="current-password"
/>
<button type="submit" onClick={(event) => event.preventDefault()}>
Login
</button>
</fieldset>
<fieldset>
<label>
<input type="checkbox" role="switch" name="switch" defaultChecked={true} />{" "}
Remember me
</label>
</fieldset>
</form>
<Code as="footer" dataTheme="light">{`<article data-theme="light">
...
</article>`}</Code>
</article>
<article data-theme="dark" aria-label="Forced dark theme example">
<Heading level={2}>Dark card</Heading>
<form>
<fieldset className="grid">
<input
type="text"
name="login"
placeholder="Login"
aria-label="Login"
autoComplete="username"
/>
<input
type="password"
name="password"
placeholder="Password"
aria-label="Password"
autoComplete="current-password"
/>
<button type="submit" onClick={(event) => event.preventDefault()}>
Login
</button>
</fieldset>
<fieldset>
<label>
<input type="checkbox" role="switch" name="switch" defaultChecked={true} />{" "}
Remember me
</label>
</fieldset>
</form>
<Code as="footer">{`<article data-theme="dark">
...
</article>`}</Code>
</article>
</section>
{/* Edit on GitHub */}
<EditOnGithub file="docs.color-schemes.jsx" />
</Content>
</>
);
}