diff --git a/.gitignore b/.gitignore
index f9989794a..c97e6b3e0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,10 @@
 /site
 /public
 
+# generated by zola
+/static/styles/syntax-theme-dark.css
+/static/styles/syntax-theme-light.css
+
 # these are old compiled sass files, people might still have them lying arouynd
 /static/styles/vendor.css
 /static/styles/app.css
diff --git a/config.toml b/config.toml
index 32b0acd6c..76aeff886 100644
--- a/config.toml
+++ b/config.toml
@@ -8,7 +8,11 @@ build_search_index = false
 
 [markdown]
 highlight_code = true
-highlight_theme = "boron"
+highlight_theme = "css"
+highlight_themes_css = [
+  { theme = "boron", filename = "styles/syntax-theme-dark.css" },
+  { theme = "OneHalfLight", filename = "styles/syntax-theme-light.css" },
+]
 bottom_footnotes = true
 insert_anchor_links = "left"
 extra_syntaxes_and_themes = ["syntaxes"]
diff --git a/templates/headers.html b/templates/headers.html
index 6b93b7361..8a66d93ed 100644
--- a/templates/headers.html
+++ b/templates/headers.html
@@ -19,6 +19,8 @@
 <link rel="stylesheet" href="{{ config.base_url | safe }}/styles/tachyons.css"/>
 <link rel="stylesheet" href="{{ config.base_url | safe }}/styles/fonts.css"/>
 <link rel="stylesheet" href="{{ config.base_url | safe }}/styles/app.css"/>
+<link rel="stylesheet" type="text/css" href="/styles/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
+<link rel="stylesheet" type="text/css" href="/styles/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
 
 <!-- stylesheet for user agents without js -->
 <noscript>