From 791fe66ccfbc18b8c132026277a5db7977be5704 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Thu, 22 Feb 2024 15:22:10 +0100
Subject: [PATCH] :lipstick: make darkmode standard theme when no javascript

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 src/components/Footer.astro    | 12 ++++++------
 src/components/ThemeIcon.astro | 20 +++++++++----------
 src/styles/global.css          | 36 +++++++++++++++++-----------------
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7d3dd0e..638908d 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -8,9 +8,9 @@ const today = new Date();
 
   const updateImageForTheme = () => {
     const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
-    githubImage.src = currentTheme === 'dark' ? '/socials/github_dark.svg' : '/socials/github_light.svg';
-    spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_dark.svg' : '/socials/spotify_light.svg';
-    webringImage.src = currentTheme === 'dark' ? '/socials/webring_dark.svg' : '/socials/webring_light.svg';
+    githubImage.src = currentTheme === 'dark' ? '/socials/github_light.svg' : '/socials/github_dark.svg';
+    spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_light.svg' : '/socials/spotify_dark.svg';
+    webringImage.src = currentTheme === 'dark' ? '/socials/webring_light.svg' : '/socials/webring_dark.svg';
   };
 
   updateImageForTheme();
@@ -25,13 +25,13 @@ const today = new Date();
 	<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
 	<div class="flex gap-1">
     <a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
-      <img id="githubImage" height="30" width="30" src="/socials/github_light.svg" alt="GitHub"/>
+      <img id="githubImage" height="30" width="30" src="/socials/github_dark.svg" alt="GitHub"/>
     </a>
     <a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
-      <img id="spotifyImage" height="30" width="30" src="/socials/spotify_light.svg" alt="Spotify"/>
+      <img id="spotifyImage" height="30" width="30" src="/socials/spotify_dark.svg" alt="Spotify"/>
     </a>
     <a href="https://webring.xxiivv.com/#sid" target="_blank" rel="noopener">
-      <img id="webringImage" height="30" width="30" src="/socials/webring_light.svg" alt="XXIIVV webring"/>
+      <img id="webringImage" height="30" width="30" src="/socials/webring_dark.svg" alt="XXIIVV webring"/>
     </a>
   </div>
 </footer>
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index c95753c..0de47ca 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -12,12 +12,12 @@
       border: 0;
       background: none;
     }
-    .sun { fill: #3B2C29; }
-    .moon { fill: transparent; }
+    .sun { fill: transparent; }
+    .moon { fill: #9AD3BB; }
   
   
-    :global(.dark) .sun { fill: transparent; }
-    :global(.dark) .moon { fill: #9AD3BB; }
+    :global(.dark) .sun { fill: #3B2C29; }
+    :global(.dark) .moon { fill: transparent; }
   </style>
 
 <script is:inline>
@@ -25,16 +25,16 @@
       if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
         return localStorage.getItem('theme');
       }
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        return 'dark';
-      }
+      if (window.matchMedia('(prefers-color-scheme: light)').matches) {
         return 'light';
+      }
+        return 'dark';
     })();
   
-    if (theme === 'light') {
-      document.documentElement.classList.remove('dark');
+    if (theme === 'dark') {
+      document.documentElement.classList.remove('light');
     } else {
-      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('light');
     }
   
     window.localStorage.setItem('theme', theme);
diff --git a/src/styles/global.css b/src/styles/global.css
index 6086d8c..dd6a652 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -14,13 +14,13 @@
 }
 
 html {
-	background-color: var(--light-bg);
-	color: var(--light-1);
+	background-color: var(--dark-bg);
+	color: var(--dark-1);
 }
 
 html.dark {
-	background-color: var(--dark-bg);
-	color: var(--dark-1);
+	background-color: var(--light-bg);
+	color: var(--light-1);
 }
 
 body {
@@ -33,13 +33,13 @@ p {
 
 /* FOOTER */
 .footerbg {
-	background-color: var(--light-bg);
-	border-top: 1px solid var(--light-1);
+	background-color: var(--dark-bg);
+	border-top: 1px solid var(--dark-1);
 }
 
 .dark .footerbg {
-	background-color: var(--dark-bg);
-  	border-top: 1px solid var(--dark-1);
+	background-color: var(--light-bg);
+  	border-top: 1px solid var(--light-1);
 }
 
 /* BLOG */
@@ -84,25 +84,25 @@ p {
 	font-weight: 600;
 }
 
-.blog a { color: var(--light-link);}
+.blog a { color: var(--dark-link);}
 
-.dark .blog a { color: var(--dark-link);}
+.dark .blog a { color: var(--light-link);}
 
 .blog a:hover { text-decoration: underline 2px;}
 
-.blogtime { color: var(--light-2); }
+.blogtime { color: var(--dark-2); }
 
-.dark .blogtime { color: var(--dark-2); }
+.dark .blogtime { color: var(--light-2); }
 
 /* LOGS */
 .borderbottom {
 	border-bottom-width: 2px;
-	border-color: var(--light-3);
+	border-color: var(--dark-3);
 }
 
 .dark .borderbottom {
 	border-bottom-width: 2px;
-	border-color: var(--dark-3);
+	border-color: var(--light-3);
 }
 
 /* GALLERY */
@@ -134,11 +134,11 @@ p {
 }
 
 .cv a { 
-	color: var(--light-link);
+	color: var(--dark-link);
 	font-size: small;
 }
 
-.dark .cv a { color: var(--dark-link);}
+.dark .cv a { color: var(--light-link);}
 
 .cv a:hover { text-decoration: underline 2px;;}
 
@@ -162,10 +162,10 @@ code {
 
 blockquote {
 	padding: 0 0 0 10px;
-	border-left: 5px solid var(--light-1);
+	border-left: 5px solid var(--dark-1);
 }
 
 .dark blockquote {
 	padding: 0 0 0 10px;
-	border-left: 5px solid var(--dark-1);
+	border-left: 5px solid var(--light-1);
 }
\ No newline at end of file