Add light theme for syntax hightlighting (#1572)

Author: senekor

.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

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"]

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>