101 lines
6.9 KiB
HTML
101 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="main-background-image">
|
|
<head>
|
|
<title>Updated the Css Again (Prefers-Color-Scheme) | vodoraslo's blog</title>
|
|
<link rel="canonical" href="https://vodoraslo.xyz/">
|
|
<link rel='alternate' type='application/rss+xml' title="vodoraslo's blog RSS" href='/index.xml'>
|
|
<link rel='stylesheet' type='text/css' href='/style.css?v=1.0.0.12'>
|
|
<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>
|
|
<div class="main-background-image">
|
|
<body>
|
|
<main>
|
|
<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>
|
|
<hr style="color:var(--strong);background-color: var(--strong); border-color: var(--strong);"><article style="padding: 0% 2.5% 0% 2.5%;">
|
|
<div class="breadcrumbs">
|
|
|
|
<nav><a href="/">vodoraslo</a> / <a href="/articles/">Articles</a> / Updated the Css Again (prefers-color-scheme)</nav>
|
|
|
|
</div>
|
|
|
|
<small><em><p style="color: var(--muted_text);">作成日: <time datetime="2023-04-05T16:58:44+03:00" style="color: var(--muted_text);">2023年4月5日 (水)</time>; 最終更新日: <time datetime="2023-05-14T14:33:48+03:00" style="color: var(--muted_text);">2023年5月14日 (日)</time> </p></em></small>
|
|
<div class="post-content"><p>I actually updated the css once more.</p>
|
|
<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>
|
|
|
|
|
|
|
|
<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> {
|
|
</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" 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> {
|
|
</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" class="chroma"><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>
|
|
|
|
|
|
<div style="text-align: right;">
|
|
|
|
</div></div>
|
|
|
|
<br>
|
|
<hr style="color:var(--strong); margin: 0; background-color: var(--strong); border-color: var(--strong);">
|
|
<div id="nextprev">
|
|
<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>
|
|
</div>
|
|
<div ><div style="clear:both" class=taglist>
|
|
Tags: [<a id="tag_updates" href="https://vodoraslo.xyz/tags/updates">Updates</a>]
|
|
</div><br>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<footer style="padding-top: 0.5em;">
|
|
|
|
<div style="padding-bottom: 0.2em; display: inline-block;"><a href="https://vodoraslo.xyz/articles" title="List of all my articles and writings.">📜 Articles</a> <strong>•</strong> <a href="https://vodoraslo.xyz/library" title="My personal library.">📚 Library</a> <strong>•</strong> <a href="https://wiki.vodoraslo.xyz" title="My personal Wiki page.">🌐 Wiki</a> <strong>•</strong> <a href="https://vodoraslo.xyz/index.xml" title="Subscribe via RSS for updates.">📰 RSS</a><hr></div>
|
|
|
|
|
|
|
|
<div style="padding-bottom: 0.7em;" class="index-links"><a href="https://vodoraslo.xyz/" title="Return to the homepage.">🏠 Homepage</a></div>
|
|
</footer>
|
|
|
|
</body>
|
|
</div>
|
|
</html>
|