blob: 25eee0d373abf03b9b4a1f0d1fe93d7842cdd315 (
plain)
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
|
--post-date: 2022-12-05
--type: blog
<article>
<h1>CSS Themes Exist Now!?</h1>
<p>Yeah news to me too! Seems like according to <a rel=
"external noopener noreferrer"
target="_blank"
href=
"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility">
the MDN</a> it’s been supported since 2019 for most browsers and
supported by all by now.</p>
<p>This is so wild!</p>
<h2>Why is this cool?</h2>
<p>Well you may have noticed this is in dark mode now (if you set your
preferences to dark in your OS/Browser). But this is cool because it
means we’re no longer restricted to using Javascript and custom
preferences for websites.</p>
<p>I had assumed this existed because sites like GitHub were defaulting
to darkmode despite me never setting anything in like my profile
settings. But I just assumed based off of my legacy knowledge this was
some custom render trick using javascript.</p>
<h3>Still no JS!</h3>
<p>I keep this blog JS free! While not all pages under the senders.io
umbrella are javascript free - everything in www.senders.io (this blog)
will always be.</p>
<p>I try to keep that, not only for my sake, but for your sake too - a
javascript free blog means the priority is reading.</p>
<h2>Examples</h2>
<p>So I achieve darkmode in this blog by doing the following:</p>
<pre><code>/* default / light */
:root {
--background: white;
--font: black;
--quote: #eee;
--link: #0303ee;
--linkv: #551a8b;
--linkf: #f02727;
--articleborder: #060606;
--tableborder: #aaa;
--tablehead: #ebcfff;
--tablez: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #1e1e1e;
--font: #eee;
--quote: #444;
--link: #00d3d3;
--linkv: #cd78f4;
--linkf: #f02727;
--articleborder: #23ed9b;
--tableborder: #aaa;
--tablehead: #6f5a7e;
--tablez: #313131;
}
}
</code></pre>
<p>Essentially, I leverage <a rel="external noopener noreferrer"
target="_blank"
href=
"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
CSS Variables</a> to define the specific areas I set theme specific
colors (my nav bar is static regardless of dark/light mode for
example).</p>
<p>Then if the media preference is dark - I overwrite the variables with
my dark mode values!</p>
<p>Whats tricky is originally most of these values didn’t actually HAVE
values set - I relied on the system default for things like links and the
page colors in an effort to use minimum CSS as well.</p>
<p>I still feel like I am honoring that since I don’t have to duplicate
any actual CSS this way, I just have a lookup table of color values.</p>
<p>That being said my CSS file is still only about 3kB which is not so
bad. And I’ve actually covered most themed properties already - links,
tables, quotes.</p>
<h3>Toggling Themes</h3>
<p>Something else I found out during this experiment is you can actually
toggle the themes directly in your developer tooling. By opening your
devtools and going to Inspector (in firefox at least) there are two
buttons in the styles section “toggle light color scheme” and “toggle
dark color scheme” using a sun and moon icon.</p>
<p>This made testing VERY easy and actually is what I noticed to prompt
me into looking up if this was a standard CSS thing or not. So thanks
Mozilla!</p>
<h2>Conclusion</h2>
<p>Yeah if you’ve never realized this check out the MDN guides on both
variables (I didn’t realize these got put in the standard either!) and
themes!</p>
<ul>
<li>CSS Variables: <a rel="external noopener noreferrer"
target="_blank"
href=
"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties</a>
</li>
<li>CSS Media prefers-color-scheme: <a rel=
"external noopener noreferrer"
target="_blank"
href=
"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme</a>
</li>
</ul>
</article>
|