Allow setting different primary color for dark mode (fixes #35)

config.toml

@@ -56,6 +56,10 @@ taxonomies = [{ name = "tags", feed = true }]
 primary_color = "#ff7800"
 # Same as primary_color, but with 20% opacity
 primary_color_alpha = "rgba(255, 120, 0, 0.2)"
+# Ditto but for the dark mode.
+# If not set regular variant will be used.
+primary_color_dark = "#ffa348"
+primary_color_dark_alpha = "rgba(255, 163, 72, 0.2)"
 # Use emoji as a favicon.
 # Only one emoji is being rendered, everything else is truncated.
 # emoji_favicon = "🦆🪶"

content/_index.md

@@ -94,7 +94,8 @@ To add your own or override existing styles, create a custom stylesheet and add
 ```toml
 [extra]
 stylesheets = [
-  "YOUR_STYLE.css"
+  "YOUR_STYLE.css",
+  "ALSO_YOUR_STYLE.css"
 ]
 ```
 
@@ -111,19 +112,26 @@ You can also load stylesheets per page/section by setting them inside page's fro
 ```toml
 [extra]
 stylesheets = [
-  "YOUR_STYLE.css",
+  "YOUR_PAGE_STYLE.css"
-  "ALSO_YOUR_STYLE.css"
 ]
 ```
 
 ### Primary Color
 
-Duckquill respects chosen primary color everywhere, simply change the primary color in `config.toml`:
+Duckquill respects chosen primary color everywhere. To use your own, simply change the primary color in `config.toml`:
 
 ```toml
 [extra]
-primary_color = "COLOR_CODE"
+primary_color = "#3584e4"
-primary_color_alpha = "COLOR_CODE"
+primary_color_alpha = "rgba(53, 132, 228, 0.2)"
+```
+
+Additionally, you can set a separate color for dark mode:
+
+```toml
+[extra]
+primary_color_dark = "#ff7800"
+primary_color_dark_alpha = "rgba(255, 120, 0, 0.2)"
 ```
 
 ### Favicon

templates/partials/head.html

@@ -4,6 +4,9 @@
 	<meta name="description" content="{{ config.description }}" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996') }}" />
+	{%- if config.extra.primary_color_dark %}
+		<meta name="theme-color" content="{{ config.extra.primary_color_dark }}" media="(prefers-color-scheme:dark)" />
+	{%- endif %}
 	<link rel="canonical" href="{{ current_url | default(value='/') | safe }}" />
 	<title>{% include "partials/title.html" %}</title>
 
@@ -37,6 +40,15 @@
 			--primary-color: {{ config.extra.primary_color | default(value="#9a9996") }};
 			--primary-color-alpha: {{ config.extra.primary_color_alpha | default(value="rgba(154, 153, 150, 0.2)") }};
 		}
+
+		{%- if config.extra.primary_color_dark %}
+			@media (prefers-color-scheme: dark) {
+				:root {
+					--primary-color: {{ config.extra.primary_color_dark }};
+					--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
+				}
+			}
+		{%- endif %}
 	</style>
 
 	{%- if config.extra.goatcounter %}