diff --git a/templates/partials/head.html b/templates/partials/head.html
index a6f5079..ade56f4 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -33,7 +33,21 @@
 		<link rel="stylesheet" href="{{ get_url(path=stylesheet) | safe }}" />
 	{%- endfor %}
 
-	<style>:root {--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)") }};}</style>
+	<style>
+		:root {
+			--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 | default(value="#9a9996") }};
+					--primary-color-alpha: {{ config.extra.primary_color_dark_alpha | default(value="rgba(154, 153, 150, 0.2)") }};
+				}
+			}
+		{%- endif %}
+	</style>
 
 	{%- if config.extra.goatcounter %}
 		<script data-goatcounter="https://{{ config.extra.goatcounter.user }}.{{ config.extra.goatcounter.host | default(value='goatcounter.com') }}/count" async src="//gc.zgo.at/count.js"></script>