2023-05-31 17:47:54 +02:00
<!DOCTYPE html>
2023-07-12 21:46:08 +02:00
< html lang = "en" class = "main-background-image" >
2023-05-31 17:47:54 +02:00
< head >
< title > Updated the Css Again (Prefers-Color-Scheme) | vodoraslo< / title >
< link rel = "canonical" href = "https://vodoraslo.xyz/" >
< link rel = 'alternate' type = 'application/rss+xml' title = "vodoraslo RSS" href = '/index.xml' >
2023-10-08 09:57:26 +02:00
< link rel = 'stylesheet' type = 'text/css' href = '/style.css?v=1.0.0.8' >
2023-05-31 17:47:54 +02:00
< link rel = "icon" href = "/favicon.ico" >
2023-05-14 13:33:48 +02:00
< meta name = "description" content = "I actually updated the css once more .
If you’ re using a dark theme in your browser, the website will follow suit and change to darker colors.
I did this by setting the light theme to be by default for more readability:
2023-05-31 17:47:54 +02:00
:root { --bg: #fafafa; --fg: #2f343f; --links: #4084d6; --muted_text: rgb(93, 93, 99); }
and then this checks that if the user prefers a darker theme, they shall get a dark theme."/>
< meta name = "keywords" content = "updates" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "robots" content = "index, follow" >
< meta charset = "utf-8" >
< / head >
2023-07-12 21:46:08 +02:00
< div class = "main-background-image" >
2023-05-31 17:47:54 +02:00
< body >
< main >
2023-07-21 17:57:40 +02:00
< header > < h1 style = "margin-top: 0%; padding-top: 0.5em;" id = "tag_Updated the Css Again (prefers-color-scheme)" > Updated the Css Again (prefers-color-scheme)< / h1 > < / header >
2023-10-08 09:57:26 +02:00
< hr style = "color:var(--strong);background-color: var(--strong);" > < article style = "padding: 0% 2.5% 0% 2.5%;" >
2023-05-31 17:47:54 +02:00
< div class = "breadcrumbs" >
< nav > < a href = "/" > vodoraslo< / a > / < a href = "/articles/" > Articles< / a > / Updated the Css Again (prefers-color-scheme)< / nav >
< / div >
2023-07-20 20:49:09 +02:00
2023-10-08 09:57:26 +02:00
< p style = "color: var(--muted_text);" > Last updated: < time datetime = "2023-05-14T14:33:48+03:00" style = "color: var(--muted_text);" > 2023年5月14日 (日)< / time > < a href = "/index.xml" > < img src = "/rss.svg" style = "max-height:1.5em; float:right;" alt = "RSS Feed" title = "Subscribe via RSS for updates." > < / a > < / p >
2023-07-20 20:45:40 +02:00
< div class = "post-content" > < p > I actually updated the css once more.< / p >
2023-05-14 13:33:48 +02:00
< p > If you’ re using a dark theme in your browser, the website will follow suit and change to darker colors.< / p >
< p > I did this by setting the light theme to be by default for more readability:< / p >
2023-05-31 17:47:54 +02:00
< div class = "highlight" >
< pre tabindex = "0" class = "chroma" > < code class = "language-css" data-lang = "css" > < span style = "display:flex;" > < span > :< span style = "color:#e5c07b" > root< / span > {
2023-05-14 13:33:48 +02:00
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#dcaeea" > --bg< / span > : < span style = "color:#d19a66" > #fafafa< / span > ;
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#dcaeea" > --fg< / span > : < span style = "color:#d19a66" > #2f343f< / span > ;
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#dcaeea" > --links< / span > : < span style = "color:#d19a66" > #4084d6< / span > ;
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#dcaeea" > --muted_text< / span > : < span style = "color:#ef8383" > rgb< / span > (< span style = "color:#d19a66" > 93< / span > , < span style = "color:#d19a66" > 93< / span > , < span style = "color:#d19a66" > 99< / span > );
2023-05-31 17:47:54 +02:00
< / span > < / span > < span style = "display:flex;" > < span > }< / span > < / span > < / code > < / pre > < / div >
< p > and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn’ t know this stuff existed, thought webshits just use java script for everything, but I guess I’ m wrong.< / p >
< div class = "highlight" >
< pre tabindex = "0" class = "chroma" > < code class = "language-css" data-lang = "css" > < span style = "display:flex;" > < span > @< span style = "color:#c678dd" > media< / span > < span style = "color:#c7bf54" > (< / span > < span style = "color:#e06c75" > prefers-color-scheme< / span > < span style = "color:#c7bf54" > :< / span > < span style = "color:#e06c75" > dark< / span > < span style = "color:#c7bf54" > )< / span > {
2023-05-14 13:33:48 +02:00
< / span > < / span > < span style = "display:flex;" > < span > :< span style = "color:#e5c07b" > root< / span > {
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#dcaeea" > --bg< / span > : < span style = "color:#d19a66" > #141414< / span > ;
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#dcaeea" > --fg< / span > : < span style = "color:#ef8383" > rgb< / span > (< span style = "color:#d19a66" > 232< / span > , < span style = "color:#d19a66" > 228< / span > , < span style = "color:#d19a66" > 228< / span > );
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#dcaeea" > --links< / span > : < span style = "color:#d19a66" > #5da0f2< / span > ;
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#dcaeea" > --muted_text< / span > : < span style = "color:#ef8383" > rgb< / span > (< span style = "color:#d19a66" > 179< / span > , < span style = "color:#d19a66" > 182< / span > , < span style = "color:#d19a66" > 186< / span > );
< / span > < / span > < span style = "display:flex;" > < span > }
2023-05-31 17:47:54 +02:00
< / span > < / span > < span style = "display:flex;" > < span > }< / span > < / span > < / code > < / pre > < / div >
< p > And this is how CSS variables are used:< / p >
< div class = "highlight" >
< pre tabindex = "0" class = "chroma" > < code class = "language-css" data-lang = "css" > < span style = "display:flex;" > < span > < span style = "color:#e06c75" > body< / span > {
2023-05-14 13:33:48 +02:00
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#c678dd" > font-family< / span > : < span style = "color:#b756ff;font-weight:bold" > sans-serif< / span > ;
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#c678dd" > background< / span > : < span style = "color:#00b1f7" > var< / span > (< span style = "color:#c7bf54" > --< / span > < span style = "color:#c1abea" > bg< / span > );
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#c678dd" > color< / span > : < span style = "color:#00b1f7" > var< / span > (< span style = "color:#c7bf54" > --< / span > < span style = "color:#c1abea" > fg< / span > );
2023-05-31 17:47:54 +02:00
< / span > < / span > < span style = "display:flex;" > < span > }< / span > < / span > < / code > < / pre > < / div >
2023-07-15 13:53:02 +02:00
< div style = "text-align: right;" >
2023-10-11 20:34:21 +02:00
< br > < a href = "mailto:chad@vodoraslo.xyz?subject=Re: Updated%20the%20Css%20Again%20%28prefers-color-scheme%29&body=Page in question - https%3a%2f%2fvodoraslo.xyz%2farticles%2fupdates%2fupdated-the-css-again%2f" > < i > 📬 Reply via email!< / i > < / a > < br >
2023-07-15 13:53:02 +02:00
< / div > < / div >
2023-05-31 17:47:54 +02:00
< div id = "nextprev" >
2023-10-08 09:57:26 +02:00
< a href = "/library/ted-kaczynski/ship-of-fools/" > < div id = "prevart" > < i > Previous:< / i > < br > Ship of Fools< / div > < / a >
< a href = "/library/ted-kaczynski/hit-where-it-hurts/" > < div id = "nextart" > < i > Next:< / i > < br > Hit Where It Hurts< / div > < / a >
2023-05-31 17:47:54 +02:00
< / div >
2023-10-08 09:57:26 +02:00
< div > < div style = "clear:both" class = taglist >
2023-05-31 17:47:54 +02:00
Tags: [< a id = "tag_updates" href = "https://vodoraslo.xyz/tags/updates" > Updates< / a > ]
2023-10-08 09:57:26 +02:00
< / div > < br >
2023-05-31 17:47:54 +02:00
< / div >
< / article >
2023-10-08 09:57:26 +02:00
< hr style = "color:var(--strong); margin: 0; background-color: var(--strong);" >
2023-05-31 17:47:54 +02:00
< / main >
2023-10-08 09:57:26 +02:00
< footer style = "padding-top: 0.5em;" >
< div style = "padding-bottom: 0.7em;" class = "index-links" > < a href = "https://vodoraslo.xyz/" > Homepage< / a > < / div >
2023-05-31 17:47:54 +02:00
< / footer >
< / body >
2023-07-12 21:46:08 +02:00
< / div >
2023-05-31 17:47:54 +02:00
< / html >
