build/dark-mode/index.html


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

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="data:,">
	<title>Supporting Basic Dark Mode</title>
	<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
	<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}.footnotes{font-size:90%;}</style>
</head>

<nav>
	<a href="#menu">Menu &darr;</a>
</nav>

<main>
<h1 id="supporting-basic-dark-mode">Supporting Basic Dark Mode</h1>

<p>2023-03-07</p>

<p>The default <code>barf</code> site generator now supports basic dark mode functionality. This has been achieved by including the standard <code>color-scheme</code> meta tag in the core <code>header.html</code> file:</p>

<pre><code>&#60;meta name="color-scheme" content="dark light"&#62;
</code></pre>

<p>This change also ships with some minor updates to the default <code>blockquote</code> design. You can see an example below:</p>

<blockquote>
<p>This is a really <em>cool</em> blockquote</p>
</blockquote>

<h2 id="minor-caveat">Minor Caveat</h2>

<p>Unfortunately, Safari still has minor <code>ahref</code> &#47; link color issue when defaulting to browser dark mode. If this is a problem for your own build of <code>barf</code>, take a look at a <a href="https://bt.ht/safari-default-dark-mode/">solution I wrote about here</a>.</p>

<p>Personally, I can&#8217;t be bothered to add that extra code to this project. The Safari team needs to get their shit together and fix such a simple bug. Plus, you shouldn&#8217;t be using Safari anyway - it&#8217;s proprietary garbage.</p>
<footer role="contentinfo">
    <hr>
    <h3 id="menu">Menu Navigation</h3>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/websites">Websites</a></li>
        <li><a href="https://git.btxx.org/barf">Source Code</a></li>
    </ul>
    <small>
        Feeds: <a href="/atom.xml">Atom</a> | <a href="/rss.xml">RSS</a> <br>
        Built with <a href="https://git.btxx.org/barf">barf</a>. <br>
        The <a href="https://git.btxx.org/barf">code for this site</a> is MIT.
    </small>
</footer>