diff --git a/internal/action/static/logo-dark.png b/internal/action/static/logo-dark.png
new file mode 100644
index 0000000..2adb1cd
Binary files /dev/null and b/internal/action/static/logo-dark.png differ
diff --git a/internal/action/static/style.css b/internal/action/static/style.css
index bd453bb..aa312f6 100644
--- a/internal/action/static/style.css
+++ b/internal/action/static/style.css
@@ -1,7 +1,28 @@
 body {
+	background: #eff;
 	background-image: url(/tile.png?a=static);
 }
 
+@media (prefers-color-scheme: dark) {
+	body {
+		background: #100;
+		background-image: url(/tile-dark.png?a=static);
+		color: #bbb;
+	}
+	a:link {
+		color: #48c;
+	}
+	input, textarea {
+		background: #000;
+		color: #bbb;
+		border-color: #444;
+	}
+	.hljs {
+		background: #000;
+		color: #bbb;
+	}
+}
+
 textarea {
 	width: 98%;
 }
diff --git a/internal/action/static/tile-dark.png b/internal/action/static/tile-dark.png
new file mode 100644
index 0000000..a9967db
Binary files /dev/null and b/internal/action/static/tile-dark.png differ
diff --git a/internal/util/templates/all.html b/internal/util/templates/all.html
index b1ab7b3..42b56d8 100644
--- a/internal/util/templates/all.html
+++ b/internal/util/templates/all.html
@@ -11,7 +11,13 @@
 <body>
 
 <div>
-<a href="/"><img src="/logo.png?a=static" border="0" alt="{{.SiteName}}" /></a>
+<a href="/">
+<picture>
+<source srcset="/logo.png?a=static" media="(prefers-color-scheme: light)">
+<source srcset="/logo-dark.png?a=static" media="(prefers-color-scheme: dark)">
+<img src="/logo.png?a=static" alt="{{.SiteName}}">
+</picture>
+</a>
 <a href="/">Back</a>
 </div>
 
diff --git a/internal/util/templates/edit.html b/internal/util/templates/edit.html
index 4b8b06c..67b18ba 100644
--- a/internal/util/templates/edit.html
+++ b/internal/util/templates/edit.html
@@ -5,9 +5,9 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="format-detection" content="telephone=no">
 <meta name="viewport" content="width=device-width">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
 <link rel="stylesheet" type="text/css" href="/style.css?a=static" />
 <link rel="icon" type="image/png" href="/icon.png?a=static" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
 <script>hljs.highlightAll();</script>
 <script>MathJax = { options: { processHtmlClass: 'mathjax', ignoreHtmlClass: '.*' } };</script>
@@ -29,7 +29,13 @@
 </form>
 
 <div>
-<a href="/"><img src="/logo.png?a=static" border="0" alt="{{.SiteName}}" /></a>
+<a href="/">
+<picture>
+<source srcset="/logo.png?a=static" media="(prefers-color-scheme: light)">
+<source srcset="/logo-dark.png?a=static" media="(prefers-color-scheme: dark)">
+<img src="/logo.png?a=static" alt="{{.SiteName}}">
+</picture>
+</a>
 <a href="/{{.Name | pathescape}}">Cancel</a>
 </div>
 
diff --git a/internal/util/templates/revision.html b/internal/util/templates/revision.html
index 5705caa..caf5df3 100644
--- a/internal/util/templates/revision.html
+++ b/internal/util/templates/revision.html
@@ -5,9 +5,9 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="format-detection" content="telephone=no">
 <meta name="viewport" content="width=device-width">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
 <link rel="stylesheet" type="text/css" href="/style.css?a=static" />
 <link rel="icon" type="image/png" href="/icon.png?a=static" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
 <script>hljs.highlightAll();</script>
 <script>MathJax = { options: { processHtmlClass: 'mathjax', ignoreHtmlClass: '.*' } };</script>
@@ -17,7 +17,13 @@
 <body>
 
 <div>
-<a href="/"><img src="/logo.png?a=static" border="0" alt="{{.SiteName}}" /></a>
+<a href="/">
+<picture>
+<source srcset="/logo.png?a=static" media="(prefers-color-scheme: light)">
+<source srcset="/logo-dark.png?a=static" media="(prefers-color-scheme: dark)">
+<img src="/logo.png?a=static" alt="{{.SiteName}}">
+</picture>
+</a>
 <a href="/{{.Name | pathescape}}">Current</a>
 <a href="/{{.Name | pathescape}}?a=revs">Rev.</a>
 </div>
diff --git a/internal/util/templates/revisions.html b/internal/util/templates/revisions.html
index e78673b..930a6b9 100644
--- a/internal/util/templates/revisions.html
+++ b/internal/util/templates/revisions.html
@@ -12,7 +12,13 @@
 <body>
 
 <div>
-<a href="/"><img src="/logo.png?a=static" border="0" alt="{{.SiteName}}" /></a>
+<a href="/">
+<picture>
+<source srcset="/logo.png?a=static" media="(prefers-color-scheme: light)">
+<source srcset="/logo-dark.png?a=static" media="(prefers-color-scheme: dark)">
+<img src="/logo.png?a=static" alt="{{.SiteName}}">
+</picture>
+</a>
 <a href="/{{.Name | pathescape}}">Current</a>
 </div>
 
diff --git a/internal/util/templates/search.html b/internal/util/templates/search.html
index 8728e08..f79f3c1 100644
--- a/internal/util/templates/search.html
+++ b/internal/util/templates/search.html
@@ -30,7 +30,13 @@ Content Search
 </form>
 
 <div>
-<a href="/"><img src="/logo.png?a=static" border="0" alt="{{.SiteName}}" /></a>
+<a href="/">
+<picture>
+<source srcset="/logo.png?a=static" media="(prefers-color-scheme: light)">
+<source srcset="/logo-dark.png?a=static" media="(prefers-color-scheme: dark)">
+<img src="/logo.png?a=static" alt="{{.SiteName}}">
+</picture>
+</a>
 <a href="/">Back</a>
 <a href="/?a=all">All</a>
 </div>
diff --git a/internal/util/templates/view.html b/internal/util/templates/view.html
index 58dd782..2b21299 100644
--- a/internal/util/templates/view.html
+++ b/internal/util/templates/view.html
@@ -4,9 +4,9 @@
 <meta charset="UTF-8" />
 <meta name="format-detection" content="telephone=no">
 <meta name="viewport" content="width=device-width">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
 <link rel="stylesheet" type="text/css" href="/style.css?a=static" />
 <link rel="icon" type="image/png" href="/icon.png?a=static" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
 <script>hljs.highlightAll();</script>
 <script>MathJax = { options: { processHtmlClass: 'mathjax', ignoreHtmlClass: '.*' } };</script>
@@ -24,7 +24,13 @@
 <body>
 
 <div>
-<a href="/"><img src="/logo.png?a=static" border="0" alt="{{.SiteName}}" /></a>
+<a href="/">
+<picture>
+<source srcset="/logo.png?a=static" media="(prefers-color-scheme: light)">
+<source srcset="/logo-dark.png?a=static" media="(prefers-color-scheme: dark)">
+<img src="/logo.png?a=static" alt="{{.SiteName}}">
+</picture>
+</a>
 <a href="/{{.Name | pathescape}}?a=edit">Edit</a>
 <a href="/{{.Name | pathescape}}?a=revs">Rev.</a>
 <a href="/?a=search">Search</a>
