.
This commit is contained in:
parent
d1709e11bf
commit
ff4a809e59
13 changed files with 80 additions and 0 deletions
|
@ -31,3 +31,11 @@ and then this checks that if the user prefers a darker theme, they shall get a d
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
And this is how CSS variables are used:
|
||||||
|
```css
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
```
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -33,6 +33,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,12 @@
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div></description>
|
</span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -38,6 +38,12 @@ I did this by setting the light theme to be by default for more readability:
|
||||||
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
</span></span><span style="display:flex;"><span> --muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
|
||||||
</span></span><span style="display:flex;"><span> }
|
</span></span><span style="display:flex;"><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:#f8f8f2;background-color:#272822;-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:#f92672">body</span> {
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
|
||||||
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
|
||||||
|
</span></span><span style="display:flex;"><span>}
|
||||||
</span></span></code></pre></div>
|
</span></span></code></pre></div>
|
||||||
|
|
||||||
<div id="nextprev">
|
<div id="nextprev">
|
||||||
|
|
Loading…
Reference in a new issue