2023-04-05 16:06:23 +02:00
<!DOCTYPE html>
< html lang = "en" >
< 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' >
< link rel = 'stylesheet' type = 'text/css' href = '/style.css' >
< link rel = "icon" href = "/favicon.ico" >
< 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:
: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 >
< body >
< main >
< header > < h1 id = "tag_Updated the Css Again (prefers-color-scheme)" > Updated the Css Again (prefers-color-scheme)< / h1 > < / header >
< article >
2023-04-11 22:01:49 +02:00
< div class = "post-content" > < p > I actually updated the css once more.< / p >
2023-04-05 16:06:23 +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-04-09 09:21:53 +02:00
< div class = "highlight" > < pre tabindex = "0" style = "color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;" > < code class = "language-css" data-lang = "css" > < 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" > #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 > );
< / 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" style = "color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;" > < 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 > {
< / 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 > }
< / 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" style = "color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;" > < code class = "language-css" data-lang = "css" > < span style = "display:flex;" > < span > < span style = "color:#e06c75" > body< / span > {
< / 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 > );
< / span > < / span > < span style = "display:flex;" > < span > }
< / span > < / span > < / code > < / pre > < / div >
2023-04-11 22:01:49 +02:00
< / div >
2023-04-05 16:06:23 +02:00
< div id = "nextprev" >
< a href = "/library/ted-kaczynski/ship-of-fools/" > < div id = "prevart" > Previous:< br > Ship of Fools< / div > < / a >
2023-04-15 18:12:16 +02:00
< a href = "/library/ted-kaczynski/hit-where-it-hurts/" > < div id = "nextart" > Next:< br > Hit Where It Hurts< / div > < / a >
2023-04-05 16:06:23 +02:00
< / div >
2023-04-15 18:30:38 +02:00
< div style = "padding-top: 1.5em" >
2023-04-05 16:06:23 +02:00
< div style = "clear:both" class = taglist >
Tags: [< a id = "tag_updates" href = "https://vodoraslo.xyz/tags/updates" > Updates< / a > ]
< / div >
2023-04-15 08:18:42 +02:00
< / div >
2023-04-05 16:06:23 +02:00
< / article >
< / main >
2023-04-15 08:18:42 +02:00
< footer class = "rssSvg" >
2023-04-15 18:30:38 +02:00
< div style = "padding-bottom: 0.5em;" > < a href = "https://vodoraslo.xyz/" > Homepage< / a > < / div > < div > < a href = "/index.xml" > < img src = "/rss.svg" style = "max-height:1.5em" alt = "RSS Feed" title = "Subscribe via RSS for updates." > < / a > < / div >
2023-04-05 16:06:23 +02:00
< / footer >
< / body >
< / html >