blob: 263db135930013403bb91866c514356886c99086 (
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
|
## CSS Themes Exist Now!?
Yeah news to me too! Seems like according to [the MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility)
it's been supported since 2019 for most browsers and supported by all by now.
This is so wild!
### Why is this cool?
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.
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.
#### Still no JS!
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.
I try to keep that, not only for my sake, but for your sake too - a javascript free blog means the priority is reading.
### Examples
So I achieve darkmode in this blog by doing the following:
```
/* 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;
}
}
```
Essentially, I leverage [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to define the specific areas I set theme specific colors (my nav bar is static regardless of dark/light mode for example).
Then if the media preference is dark - I overwrite the variables with my dark mode values!
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.
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.
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.
#### Toggling Themes
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.
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!
### Conclusion
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!
* CSS Variables: [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)
* CSS Media prefers-color-scheme: [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)
|