blob: e49f4af15325a2de21d5f1098d10c7a4bce4218e (
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
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator"
content="HTML Tidy for HTML5 for Linux version 5.6.0">
<title>senders.io - CSS Themes Exist Now!?</title>
<link rel='stylesheet'
type='text/css'
href='/index.css'>
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<div id='header'>
<a class='title'
href='/'>senders.io</a>
<nav>
<a href="/blog">blog</a> <a rel="external noopener noreferrer"
target="_blank"
href="https://github.com/s3nd3r5">github</a> <a rel=
"external noopener noreferrer"
target="_blank"
href="https://git.senders.io">cgit</a> <a rel=
"me external noopener noreferrer"
target="_blank"
href="https://tech.lgbt/@senders">mastodon</a>
</nav>
</div>
<div id="body">
<article>
<h2>CSS Themes Exist Now!?</h2>
<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>
<h3>Why is this cool?</h3>
<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>
<h4>Still no JS!</h4>
<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>
<h3>Examples</h3>
<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>
<h4>Toggling Themes</h4>
<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>
<h3>Conclusion</h3>
<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>
<div id="footer">
<i>December 05, 2022</i>
</div>
<div id='copyright'>
© 2023 senders dot io - <a rel="license external noopener noreferrer"
target="_blank"
href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
unless otherwise noted.
</div>
</div>
</body>
</html>
|