From 9a2b0aca951119c60ceedefadd82cf74d1dc937c Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Sat, 20 Jul 2024 22:07:29 +0300
Subject: [PATCH] Allow setting different primary color for dark mode (fixes
 #35)

---
 config.toml                  |  4 ++++
 content/_index.md            | 22 +++++++++++++++-------
 templates/partials/head.html | 12 ++++++++++++
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/config.toml b/config.toml
index b638ffc..b85219c 100644
--- a/config.toml
+++ b/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 = "🦆🪶"
diff --git a/content/_index.md b/content/_index.md
index 727d95d..5bf6e5e 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -94,13 +94,14 @@ 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"
 ]
 ```
 
 Additional stylesheets are expected it to be in the `static` directory. If you are using Sass they will be compiled there by default.
 
-If for some reason overridden style is not respected, try using `!important` (don't use it unless needed ). You can import styles from Duckquill using:
+If for some reason overridden style is not respected, try using `!important` (don't use it unless needed). You can import styles from Duckquill using:
 
 ```scss
 @use "../themes/duckquill/sass/NEEDED_FILE.scss";
@@ -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",
-  "ALSO_YOUR_STYLE.css"
+  "YOUR_PAGE_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_alpha = "COLOR_CODE"
+primary_color = "#3584e4"
+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
diff --git a/templates/partials/head.html b/templates/partials/head.html
index 9dd5c14..31c97d8 100644
--- a/templates/partials/head.html
+++ b/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 %}