From 1c100a45343944c7e54227ae5f99b94edcb230ea Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Wed, 4 Feb 2026 13:04:58 +0100
Subject: [PATCH] fix: use accent-dark with nord5 light override for prayer
 backgrounds

var(--color-bg-secondary) from app.css is not available since app.css
is never imported. Use var(--accent-dark) from nordtheme.css with
explicit light mode overrides using var(--nord5).
---
 .../[prayers=prayersLang]/Gebet.svelte                   | 7 ++++++-
 .../[prayers=prayersLang]/[prayer]/+page.svelte          | 7 ++++++-
 .../[rosary=rosaryLang]/+page.svelte                     | 8 +++++++-
 src/routes/[faithLang=faithLang]/angelus/+page.svelte    | 9 ++++++++-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/Gebet.svelte b/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/Gebet.svelte
index 6208775..de0d3ab 100644
--- a/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/Gebet.svelte
+++ b/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/Gebet.svelte
@@ -31,7 +31,7 @@ div.gebet{
 }
 .gebet_wrapper{
 	padding: 1em;
-	background-color: var(--color-bg-secondary);
+	background-color: var(--accent-dark);
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 	max-width: 600px;
 }
@@ -51,6 +51,11 @@ a.gebet-link {
 	color: inherit;
 	display: block;
 }
+@media (prefers-color-scheme: light) {
+	.gebet_wrapper {
+		background-color: var(--nord5);
+	}
+}
 </style>
 
 {#if href}
diff --git a/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte b/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte
index bfc48e7..018addd 100644
--- a/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte
@@ -102,7 +102,7 @@ h1 {
 }
 .gebet-wrapper {
 	padding: 1.5em;
-	background-color: var(--color-bg-secondary);
+	background-color: var(--accent-dark);
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 .intro {
@@ -110,6 +110,11 @@ h1 {
 	font-style: italic;
 	text-align: center;
 }
+@media (prefers-color-scheme: light) {
+	.gebet-wrapper {
+		background-color: var(--nord5);
+	}
+}
 </style>
 
 <div class="container">
diff --git a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
index 2a8d42c..6efa9cf 100644
--- a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
@@ -856,12 +856,18 @@ onMount(() => {
 	scroll-snap-align: start;
 	padding: 2rem;
 	margin-bottom: 2rem;
-	background: var(--color-bg-secondary);
+	background: var(--accent-dark);
 	border-radius: 8px;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 	position: relative;
 }
 
+@media (prefers-color-scheme: light) {
+	.prayer-section {
+		background: var(--nord5);
+	}
+}
+
 .prayer-section.decade {
 	scroll-snap-align: start;
 	min-height: 50vh; /* Only decades need minimum height for scroll-snap */
diff --git a/src/routes/[faithLang=faithLang]/angelus/+page.svelte b/src/routes/[faithLang=faithLang]/angelus/+page.svelte
index f0f5e0d..42553b5 100644
--- a/src/routes/[faithLang=faithLang]/angelus/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/angelus/+page.svelte
@@ -180,13 +180,20 @@
 	scroll-snap-align: start;
 	padding: 2rem;
 	margin-bottom: 2rem;
-	background: var(--color-bg-secondary);
+	background: var(--accent-dark);
 	border-radius: 8px;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 	position: relative;
 	font-size: 1.25em;
 	text-align: center;
 }
+
+@media (prefers-color-scheme: light) {
+	.prayer-section {
+		background: var(--nord5);
+	}
+}
+
 .prayers-content {
 	scroll-snap-type: y proximity;
 	max-width: 700px;