diff --git a/.gitignore b/.gitignore
index 15ce475e7..d90d7f863 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-/public/
\ No newline at end of file
+/public/
+/static/syntax-*
diff --git a/config.toml b/config.toml
index f80949de2..35730ecbb 100644
--- a/config.toml
+++ b/config.toml
@@ -11,4 +11,9 @@ generate_feeds = true
 
 [markdown]
 highlight_code = true
-highlight_theme = "OneHalfLight"
+highlight_theme = "css"
+
+highlight_themes_css = [
+  { theme = "OneHalfDark", filename = "syntax-theme-dark.css" },
+  { theme = "OneHalfLight", filename = "syntax-theme-light.css" },
+]
diff --git a/content/_index.md b/content/_index.md
index 24b225083..d5781f237 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -4,8 +4,11 @@ template = "index.html"
 +++
 
 <div class="hero">
-<img src="logo.svg">
-<div>uutils</div>
+    <picture>
+        <source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
+        <img src="logo.svg">
+    </picture>
+    <div>uutils</div>
 </div>
 
 The uutils project reimplements ubiquitous command line utilities in
diff --git a/static/logo-dark.svg b/static/logo-dark.svg
new file mode 100644
index 000000000..dee38a04f
--- /dev/null
+++ b/static/logo-dark.svg
@@ -0,0 +1,61 @@
+<svg height="106" width="106" viewbox="0 0 106 106" id="logo"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg">
+  <g id="logo" transform="translate(53, 53)">
+    <g id="gear" mask="url(#holes)">
+      <circle r="43" fill="none" stroke="white" stroke-width="9" />
+      <g id="cogs">
+        <polygon id="cog" stroke="white" stroke-width="3.3" stroke-linejoin="round" points="46,3 51,0 46,-3" />
+        <use xlink:href="#cog" transform="rotate(11.25)" />
+        <use xlink:href="#cog" transform="rotate(22.50)" />
+        <use xlink:href="#cog" transform="rotate(33.75)" />
+        <use xlink:href="#cog" transform="rotate(45.00)" />
+        <use xlink:href="#cog" transform="rotate(56.25)" />
+        <use xlink:href="#cog" transform="rotate(67.50)" />
+        <use xlink:href="#cog" transform="rotate(78.75)" />
+        <use xlink:href="#cog" transform="rotate(90.00)" />
+        <use xlink:href="#cog" transform="rotate(101.25)" />
+        <use xlink:href="#cog" transform="rotate(112.50)" />
+        <use xlink:href="#cog" transform="rotate(123.75)" />
+        <use xlink:href="#cog" transform="rotate(135.00)" />
+        <use xlink:href="#cog" transform="rotate(146.25)" />
+        <use xlink:href="#cog" transform="rotate(157.50)" />
+        <use xlink:href="#cog" transform="rotate(168.75)" />
+        <use xlink:href="#cog" transform="rotate(180.00)" />
+        <use xlink:href="#cog" transform="rotate(191.25)" />
+        <use xlink:href="#cog" transform="rotate(202.50)" />
+        <use xlink:href="#cog" transform="rotate(213.75)" />
+        <use xlink:href="#cog" transform="rotate(225.00)" />
+        <use xlink:href="#cog" transform="rotate(236.25)" />
+        <use xlink:href="#cog" transform="rotate(247.50)" />
+        <use xlink:href="#cog" transform="rotate(258.75)" />
+        <use xlink:href="#cog" transform="rotate(270.00)" />
+        <use xlink:href="#cog" transform="rotate(281.25)" />
+        <use xlink:href="#cog" transform="rotate(292.50)" />
+        <use xlink:href="#cog" transform="rotate(303.75)" />
+        <use xlink:href="#cog" transform="rotate(315.00)" />
+        <use xlink:href="#cog" transform="rotate(326.25)" />
+        <use xlink:href="#cog" transform="rotate(337.50)" />
+        <use xlink:href="#cog" transform="rotate(348.75)" />
+      </g>
+      <g id="mounts">
+        <polygon id="mount" stroke="white" stroke-width="6" stroke-linejoin="round" points="-7,-42 0,-35 7,-42" />
+        <use xlink:href="#mount" transform="rotate(72)" />
+        <use xlink:href="#mount" transform="rotate(144)" />
+        <use xlink:href="#mount" transform="rotate(216)" />
+        <use xlink:href="#mount" transform="rotate(288)" />
+      </g>
+    </g>
+    <mask id="holes">
+      <rect x="-60" y="-60" width="120" height="120" fill="#fff" />
+      <circle id="hole" cy="-40" r="3" />
+      <use xlink:href="#hole" transform="rotate(72)" />
+      <use xlink:href="#hole" transform="rotate(144)" />
+      <use xlink:href="#hole" transform="rotate(216)" />
+      <use xlink:href="#hole" transform="rotate(288)" />
+    </mask>
+  </g>
+  <path aria-label="U" transform="matrix(1.1188958,0,0,1.3531467,106.90401,-3.0479991)" style="fill:#c04828"
+    d="m -30.914582,47.152116 c 0,-6.410851 0,-27.142255 0,-27.142255 h -9.981735 c 0,0 0,22.706465 0,27.142255 0,4.43579 -0.989404,8.475308 -7.250584,8.492265 -6.26118,0.01696 -7.308935,-4.147055 -7.308935,-8.492265 V 20.009861 h -9.981735 v 27.142255 c 0,6.425292 2.643496,15.679002 17.261495,15.679002 14.617999,0 17.261494,-9.268151 17.261494,-15.679002 z" />
+</svg>
diff --git a/static/style.css b/static/style.css
index 9fad9d917..0a0c42f7c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,4 +1,5 @@
 :root {
+  /* Light theme colors (default) */
   --dark-fg-color: #fff;
   --light-fg-color: #141414;
   --light-bg-color: var(--dark-fg-color);
@@ -14,7 +15,37 @@
   --dark-highlight-fg-color: #ededed;
   --highlight-fg-color: var(--light-highlight-fg-color);
   --highlight-bg-color: var(--light-highlight-bg-color);
+  --link-text-color: #c04828;
+  --border-color: #ddd;
+  --post-bg-color: #e5e5e5;
   --font-face: "Fira Sans", sans-serif;
+
+  --github-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  --github-icon-black: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fg-color: #e1e1e1;
+    --bg-color: #222222;
+    --light-link-color: #ff7b5c;
+    --dark-link-color: #ff6b47;
+    --link-color: var(--light-link-color);
+    --light-highlight-bg-color: #2d2d2d;
+    --light-highlight-fg-color: #ffffff;
+    --dark-highlight-bg-color: #27272a;
+    --dark-highlight-fg-color: #ededed;
+    --highlight-fg-color: var(--light-highlight-fg-color);
+    --highlight-bg-color: var(--light-highlight-bg-color);
+    --link-text-color: var(--fg-color);
+    --border-color: #404040;
+    --post-bg-color: #2d2d2d;
+  }
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--fg-color);
 }
 
 *,
@@ -89,7 +120,7 @@ header {
   justify-items: center;
   padding: 0.5rem 2rem;
   width: 100%;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--border-color);
   font-size: 1.2rem;
 }
 
@@ -111,13 +142,12 @@ header .home svg {
 }
 
 header a {
-  color: black;
+  color: var(--fg-color);
   border-bottom: 2px solid transparent;
 }
 
 header a:hover:not(.home) {
-  color: black;
-  border-bottom: 2px solid #c04828;
+  border-bottom: 2px solid var(--link-text-color);
 }
 
 .navigation-block {
@@ -155,7 +185,7 @@ header .icon {
   header {
     grid-template-columns: max-content 1fr;
   }
-  
+
   .spacer {
     display: none;
   }
@@ -165,7 +195,7 @@ header .icon {
     grid-column: auto / span 2;
     justify-self: left;
   }
-  
+
   header:not(.open) .spacer,
   header:not(.open) .navigation-block {
     display: none;
@@ -273,8 +303,8 @@ ul {
 /* FOOTER */
 footer {
   align-items: center;
-  background-color: var(--fg-color);
-  color: var(--bg-color);
+  background-color: var(--light-fg-color);
+  color: var(--light-bg-color);
   display: flex;
   flex-grow: 0;
   flex-shrink: 1;
@@ -286,17 +316,23 @@ footer {
 }
 
 .github-icon {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  background-image: var(--github-icon);
   height: 1.25rem;
   width: 1.25rem;
 }
 
 .github-icon-black {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  background-image: var(--github-icon-black);
   height: 1em;
   width: 1em;
 }
 
+@media (prefers-color-scheme: dark) {
+  .github-icon-black {
+    background-image: var(--github-icon);
+  }
+}
+
 .projects {
   display: flex;
   flex-direction: column;
@@ -325,13 +361,13 @@ footer {
   margin-bottom: 0;
 }
 
-.project>span {
+.project > span {
   color: transparent;
   transition: color 0.3s;
 }
 
-.project:hover>span {
-  color: black;
+.project:hover > span {
+  color: var(--fg-color);
 }
 
 .project:hover {
@@ -353,21 +389,21 @@ footer {
 
 .details {
   margin-bottom: 1.5em;
-  color: #333;
+  color: var(--fg-color);
 }
 
 .post-thingy {
   display: block;
   padding: 1em;
-  color: black;
-  background: #e5e5e5;
+  color: var(--fg-color);
+  background: var(--post-bg-color);
   border-radius: 0.3em;
-  border: 0.2em solid #e5e5e5;
+  border: 0.2em solid var(--post-bg-color);
   margin-bottom: 0.5em;
 }
 
 .post-thingy:hover {
-  border-color: #c04828;
+  border-color: var(--link-text-color);
   background: transparent;
 }
 
@@ -391,8 +427,14 @@ blockquote {
 
 .links > a {
   padding: 0.2em 1em;
-  color: #c04828;
+  color: var(--link-text-color);
   border: 2px solid #c04828;
   flex: 1;
   text-align: center;
 }
+
+.links > a:hover {
+  color: var(--dark-fg-color);
+  background-color: #c04828;
+  border-color: #c04828;
+}
diff --git a/templates/base.html b/templates/base.html
index 61e9395ab..03d44a344 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,6 +10,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/style.css" rel="stylesheet">
+  <link href="/syntax-theme-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)" />
+  <link href="/syntax-theme-light.css" rel="stylesheet" media="(prefers-color-scheme: light)" />
 </head>
 
 <body>
@@ -54,4 +56,4 @@
     });
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>