Fixes dark/light color-scheme switching

3 files changed, 13 insertions, 16 deletions

diff --git a/public/main.css b/public/main.css
index e89888f..fcdf397 100644
--- a/public/main.css
+++ b/public/main.css
@@ -20,10 +20,10 @@
   --color-primary-900: #010003;
   --color-primary-900: oklch(5% 0.02 290);
 
-  --text-color: var(--color-primary-900);
-  --text-highlight-color: var(--color-primary-800);
-  --background-color: var(--color-primary-50);
-  --background-highlight-color: var(--color-primary-200);
+  --text-color: var(--color-primary-50);
+  --text-highlight-color: var(--color-primary-100);
+  --background-color: var(--color-primary-900);
+  --background-highlight-color: var(--color-primary-800);
 
   --max-width-prose-content: 35rem;
   --max-width-all-content: 56.6rem; /* golden ratio * prose content width */
@@ -53,16 +53,6 @@
   background-color: var(--background-color);
 }
 
-.dark {
-  --text-color: var(--color-primary-50);
-  --text-highlight-color: var(--color-primary-100);
-  --background-color: var(--color-primary-900);
-  --background-highlight-color: var(--color-primary-800);
-
-  color: var(--text-color);
-  background-color: var(--background-color);
-}
-
 @media (min-width: 40rem) {
   :root {
     --sm-to-lg: calc(var(--breakpoint-lg) - var(--breakpoint-sm));
@@ -76,6 +66,13 @@
 :is(main, article) {
   container-name: main;
   container-type: inline-size;
+
+  --text-color: var(--color-primary-900);
+  --text-highlight-color: var(--color-primary-800);
+  --background-color: var(--color-primary-50);
+  --background-highlight-color: var(--color-primary-200);
+  color: var(--text-color);
+  background-color: var(--background-color);
 }
 
 :is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) {
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f5de8b8..2f58ae2 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,7 +2,7 @@
 
 ---
 
-<footer class="dark">
+<footer>
   <p class="btn back-to-top-link">
     <a href="#main">▴ Back til tap</a>
   </p>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 1ce0749..605ba68 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -14,7 +14,7 @@ const { locale } = Astro.props;
 const t = translate(locale);
 ---
 
-<nav class="dark">
+<nav>
   <h1 class="logo">
     <a href="/">
       {t(tSite, { key: 'scots-leid-associe' })}