-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (211 loc) · 8.33 KB
/
index.html
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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<!-- <script src="/script.js"></script> -->
<title>Theme Multi Switch Web Component</title>
<meta name="theme-color" content="#000" />
<script type="module" src="/src/main.ts"></script>
</head>
<body>
<main>
<header class="content">
<h1>Theme Multi Switch Web Component</h1>
<div>
<p><strong>Super Small!</strong> 4.04 KiB / gzip: 1.75 KiB</p>
<p>Github: <a href="https://github.com/colinaut/theme-multi-switch">colinaut/theme-multi-switch</a></p>
<p>NPM: <a href="https://www.npmjs.com/package/@colinaut/theme-multi-switch">@colinaut/theme-multi-switch</a></p>
</div>
</header>
<section class="content">
<h2>Examples</h2>
<div class="grid-auto-fit gap-8">
<div>
<h3>Default</h3>
<p><theme-switch meta-colors="#eee,auto,#333"></theme-switch></p>
</div>
<div>
<h3>Restyled</h3>
<p>
<theme-switch class="bigger highlight switch-alt" meta-colors="#eee,auto,#333">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" slot="light" width="1.4em">
<path fill="currentcolor" d="M2.016 12q0-4.125 2.93-7.055t7.055-2.93 7.055 2.93 2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055z"></path>
</svg>
<span slot="auto">◑</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" slot="dark" width="1.4em">
<path
fill="currentcolor"
d="M9.984 2.016q4.172 0 7.102 2.93t2.93 7.055-2.93 7.055-7.102 2.93q-2.719 0-4.969-1.313 2.297-1.313 3.633-3.633t1.336-5.039-1.336-5.039-3.633-3.633q2.25-1.313 4.969-1.313z"
></path>
</svg>
</theme-switch>
</p>
<p>Modified css variables, css styling of parts, and added svgs to slots</p>
</div>
<div>
<h3>Different Themes</h3>
<p><theme-switch class="highlight" themes="heaven,earth,hell"></theme-switch></p>
</div>
<div>
<h3>Two Switch</h3>
<p><theme-switch class="highlight" themes="heaven,hell"></theme-switch></p>
</div>
<div>
<h3>Two Switch</h3>
<p>
<theme-switch class="highlight two-switch-top" themes="heaven,hell" layout="top" knob-width="4"></theme-switch>
</p>
<p>Layout "top" with increased knob width</p>
</div>
<div>
<h3>Four Switch</h3>
<p>
<theme-switch class="highlight four-switch-bottom" themes="heaven,earth,limbo,hell" layout="bottom" knob-width="4"></theme-switch>
</p>
<p>Layout "bottom" with increased knob width</p>
</div>
</div>
</section>
<section class="content">
<p>
I created this three way switch for setting theme as I couldn't find what I was looking for — most are two way switches and I wanted to allow for auto. So I
built a three way switch which defaults to "auto" (for browser prefers-color-scheme) and allows "light" or "dark" for overriding prefers-color-scheme. I quickly
realized that I could just as easily make it work with multiple themes!
</p>
<p>When switch is triggered it:</p>
<ul>
<li>Adds current theme to data-theme attribute on the html element.</li>
<li>Stores the current theme in localStorage under "theme" — <em>component checks for this on reload to set current theme state</em>.</li>
<li>
Triggers a "theme-switch" custom event with the current theme as detail.
<em>This will automatically update any other theme-switch components on the page.</em>
</li>
<li>
Optionally, updates meta theme-color using the "meta-colors" prop.
<ul>
<li>This requires that the meta-colors prop is set and that the meta theme-color is included in your html.</li>
<li>
If you set one of the meta-colors to "auto" it will set the meta theme-color based on the current prefers-color-scheme. This only works if you are
also using "light" and "dark" as themes.
</li>
</ul>
</li>
</ul>
<p>You can also trigger the switch externally by either changing the "theme" prop or dispatching a "theme-switch" event with the theme in the detail.</p>
</section>
<section>
<h2>Installation</h2>
<p>Add the theme-multi-switch.js script to your project. Then add the component <code><theme-switch></theme-switch></code> to your html.</p>
<p>You can do this via CDN:</p>
<code><script src="https://unpkg.com/@colinaut/theme-multi-switch/dist/theme-multi-switch.js"></script></code>
<p>Or you can pull it into your project via npm:</p>
<code>npm i @colinaut/theme-multi-switch</code>
<p>
For best results, add this to your <head> so that it is render blocking. This avoids
<a href="https://css-tricks.com/flash-of-inaccurate-color-theme-fart/">Flash of inAccurate coloR Theme (FART)</a>.
</p>
</section>
<section class="content">
<div class="content">
<h2>Modifying</h2>
<p>
Sizing uses em so it can be resized by changing the css font-size. Base color for text, knob, and track border uses currentColor so it will update if you
change the body text color.
</p>
<p>The layout and knob-width properties</p>
<p>Further restyling is possible via slots, parts, and css variables. Properties allows changing defaults and values for changing meta theme-color.</p>
</div>
<div class="grid-cols-2 gap-8">
<div>
<h3>Default Slots</h3>
<ul>
<li>light</li>
<li>auto</li>
<li>dark</li>
</ul>
<p><em>Slots are dynamically named after the theme names.</em></p>
</div>
<div>
<h3>Default Parts</h3>
<ul>
<li>light</li>
<li>auto</li>
<li>dark</li>
<li>track</li>
<li>knob</li>
</ul>
<p><em>Label Parts are dynamically named after the theme names.</em></p>
</div>
<div>
<h3>CSS Color Variables</h3>
<ul>
<li>--theme-switch-knob <code>background: var(--theme-switch-knob, currentColor);</code></li>
<li>--theme-switch-track <code>background: var(--theme-switch-track, #88888822);</code></li>
<li>--theme-switch-track-border <code>border: 0.1em solid var(--theme-switch-border, currentColor);</code></li>
<li>--theme-switch-highlight <code>color: var(--theme-switch-highlight, inherit);</code></li>
<li>--theme-switch-knob-width <code>width: calc(var(--theme-switch-knob-width, 1) * 1em);</code></li>
</ul>
</div>
<div>
<h3>Properties</h3>
<ul>
<li>themes = "light,auto,dark"</li>
<li>theme = defaults to themes[1]</li>
<li>meta-colors = ""</li>
<li>layout = "around top"</li>
</ul>
<p><em>themes and meta-colors accepts either a comma separated string or a stringified JSON array</em></p>
<p><em>layout can be either "around top", "around bottom", or just "top" or "bottom"</em></p>
</div>
</div>
</section>
<section>
<h2>Example Auto/Light/Dark CSS</h2>
<pre>
/* Values for light and dark */
:root {
--header-light: rgb(95, 0, 0);
--body-light: rgb(45, 45, 65);
--bg-light: rgb(225, 225, 225);
--track-light: rgb(205 195 165 /0.8);
--highlight-light: rgb(155, 50, 0);
--header-dark: rgb(250, 180, 120);
--body-dark: rgb(225, 225, 225);
--bg-dark: rgb(45, 45, 65);
--track-dark: rgb(105 85 55 /0.6);
--highlight-dark: rgb(225, 120, 100);
}
/* Automatic Light Mode; Light Mode Override */
html,
[data-theme="light"] {
--header: var(--header-light);
--body: var(--body-light);
--bg: var(--bg-light);
--theme-switch-track: var(--track-light);
--theme-switch-highlight: var(--highlight-light);
}
/* Dark Mode Override */
[data-theme="dark"] {
--header: var(--header-dark);
--body: var(--body-dark);
--bg: var(--bg-dark);
--theme-switch-track: var(--track-dark);
--theme-switch-highlight: var(--highlight-dark);
}
/* Automatic Dark Mode */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--header: var(--header-dark);
--body: var(--body-dark);
--bg: var(--bg-dark);
--theme-switch-track: var(--track-dark);
--theme-switch-highlight: var(--highlight-dark);
}
}
</pre>
</section>
</main>
</body>
</html>