diff --git a/src/components/BlogHeader.astro b/src/components/BlogHeader.astro
index b2711c3..2b39cb4 100644
--- a/src/components/BlogHeader.astro
+++ b/src/components/BlogHeader.astro
@@ -1,29 +1,29 @@
 ---
 import ThemeIcon from './ThemeIcon.astro';
-
-function toggleTheme() {
-  const currentTheme = document.body.getAttribute('data-theme');
-  document.body.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
-}
 ---
+<script type="module" client:load>
+  const updateSvgColorForTheme = () => {
+    const isDark = document.documentElement.classList.contains('dark');
+    const svgPath = document.getElementById('themePath');
+    if (svgPath) {
+      svgPath.setAttribute('stroke', isDark ? '#cdd6f4' : '#3B2C29');
+    }
+  };
 
+  updateSvgColorForTheme();
+
+  const themeToggle = document.getElementById('themeToggle');
+  if (themeToggle) {
+    themeToggle.addEventListener('click', updateSvgColorForTheme);
+  }
+</script>
 <header class="flex justify-between items-center py-5">
   <div>
     <a class="text-l font-semibold" href="/blog">
-      <svg class="w-6 h-6 text-gray-800 dark:text-white" style="color: var(--color-current);"  aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
+      <svg id="themeSvg" class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path id="themePath" stroke="#3B2C29" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
       </svg>
     </a>
   </div>
   <ThemeIcon />
 </header>
-
-<style>
-[data-theme='dark'] {
-  --color-current: #9AD3BB;
-}
-
-[data-theme='light'] {
-  --color-current: #3B2C29;
-}
-</style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 2b3ca4c..6ecd553 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -9,10 +9,10 @@ const today = new Date();
 
   const updateImageForTheme = () => {
     const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
-    githubImage.src = currentTheme === 'dark' ? '/socials/github_light.svg' : '/socials/github_dark.svg';
-    spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_light.svg' : '/socials/spotify_dark.svg';
-    xxiivvwebringImage.src = currentTheme === 'dark' ? '/socials/xxiivvwebring_light.svg' : '/socials/xxiivvwebring_dark.svg';
-    grandlinewebringImage.src = currentTheme === 'dark' ? '/socials/grandlinewebring.light.svg' : '/socials/grandlinewebring.dark.svg';
+    githubImage.src = currentTheme === 'dark' ? '/socials/github_dark.svg' : '/socials/github_light.svg';
+    spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_dark.svg' : '/socials/spotify_light.svg';
+    xxiivvwebringImage.src = currentTheme === 'dark' ? '/socials/xxiivvwebring_dark.svg' : '/socials/xxiivvwebring_light.svg';
+    grandlinewebringImage.src = currentTheme === 'dark' ? '/socials/grandlinewebring.dark.svg' : '/socials/grandlinewebring.light.svg';
   };
 
   updateImageForTheme();
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index 94f6799..622243d 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -12,40 +12,40 @@
       border: 0;
       background: none;
     }
-    .sun { fill: transparent; }
-    .moon { fill: #cdd6f4; }
+    .sun { fill: #3B2C29; }
+    .moon { fill: transparent; }
   
   
-    :global(.dark) .sun { fill: #3B2C29; }
-    :global(.dark) .moon { fill: transparent; }
+    :global(.dark) .sun { fill: transparent; }
+    :global(.dark) .moon { fill: #cdd6f4; }
   </style>
 
 <script is:inline>
-    const theme = (() => {
-      if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-        return localStorage.getItem('theme');
-      }
-      if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-        return 'light';
-      }
-        return 'dark';
-    })();
-  
-    if (theme === 'dark') {
-      document.documentElement.classList.remove('light');
-    } else {
-      document.documentElement.classList.add('light');
+  const theme = (() => {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme');
     }
-  
-    window.localStorage.setItem('theme', theme);
-  
-    const handleToggleClick = () => {
-      const element = document.documentElement;
-      element.classList.toggle("dark");
-  
-      const isDark = element.classList.contains("dark");
-      localStorage.setItem("theme", isDark ? "dark" : "light");
+    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+      return 'light';
     }
-  
-    document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
-  </script>
+    return 'dark';
+  })();
+
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+
+  window.localStorage.setItem('theme', theme);
+
+  const handleToggleClick = () => {
+    const element = document.documentElement;
+    element.classList.toggle("dark");
+
+    const isDark = element.classList.contains("dark");
+    localStorage.setItem("theme", isDark ? "dark" : "light");
+  }
+
+  document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
+</script>
\ No newline at end of file
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 5a41d48..0bee52e 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -12,7 +12,7 @@ const { title, description, pubDate } = Astro.props;
 
   const updateImageForTheme = () => {
     const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
-    jollyroger.src = currentTheme === 'dark' ? '/jollyroger_light.svg' : '/jollyroger_dark.svg';
+    jollyroger.src = currentTheme === 'dark' ? '/jollyroger_dark.svg' : '/jollyroger_light.svg';
   };
 
   updateImageForTheme();
diff --git a/src/styles/global.css b/src/styles/global.css
index fddbe93..f417b1c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -14,18 +14,18 @@
 }
 
 html {
-	background-color: var(--dark-bg);
-	color: var(--dark-1);
-}
-
-html.dark {
 	background-color: var(--light-bg);
 	color: var(--light-1);
 }
 
+html.dark {
+	background-color: var(--dark-bg);
+	color: var(--dark-1);
+}
+
 body {
 	font-family: Verdana, sans-serif;
-  /*"Noto Sans Mono", monospace*/
+  	/*"Noto Sans Mono", monospace*/
 }
 
 p {
@@ -34,13 +34,13 @@ p {
 
 /* FOOTER */
 .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);
 }
 
 .dark .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);
 }
 
 /* INDEX */
@@ -49,9 +49,9 @@ p {
 	padding: 10px 0 0 0;
 }
 
-.index a { color: var(--dark-link);}
+.index a { color: var(--light-link);}
 
-.dark .index a { color: var(--light-link);}
+.dark .index a { color: var(--dark-link);}
 
 .index a:hover { text-decoration: underline 2px;}
 
@@ -107,26 +107,26 @@ p {
     border: 1px solid;
 }
 
-.blog a { color: var(--dark-link); font-weight: bolder;}
+.blog a { color: var(--light-link); font-weight: bolder; }
 
-.dark .blog a { color: var(--light-link);}
+.dark .blog a { color: var(--dark-link); }
 
-.blog a:hover { text-decoration: underline 2px;}
+.blog a:hover { text-decoration: underline 2px; }
 
-.blogtime { color: var(--dark-2); }
+.blogtime { color: var(--light-2); }
 
-.dark .blogtime { color: var(--light-2); }
+.dark .blogtime { color: var(--dark-2); }
 
 /* LOGS */
 .borderbottom {
 	border-bottom-width: 2px;
-	border-color: var(--dark-3);
-  font-size: large;
+	border-color: var(--light-3);
+	font-size: large;
 }
 
 .dark .borderbottom {
 	border-bottom-width: 2px;
-	border-color: var(--light-3);
+	border-color: var(--dark-3);
 }
 
 /* GALLERY */
@@ -142,9 +142,9 @@ p {
 }
 
 .gallery table img {
-  width: 95%;
-  border: 10px solid white;
-  margin-bottom: 10px;
+	width: 95%;
+	border: 10px solid white;
+	margin-bottom: 10px;
 }
 
 .gallery table, th, td {
@@ -170,23 +170,23 @@ p {
 }
 
 .cv-date {
-	color: var(--dark-2);
-	font-size: small;
-}
-
-.dark .cv-date {
 	color: var(--light-2);
 	font-size: small;
 }
 
-.cv a { 
-	color: var(--dark-link);
+.dark .cv-date {
+	color: var(--dark-2);
 	font-size: small;
 }
 
-.dark .cv a { color: var(--light-link);}
+.cv a { 
+	color: var(--light-link);
+	font-size: small;
+}
 
-.cv a:hover { text-decoration: underline 2px;;}
+.dark .cv a { color: var(--dark-link); }
+
+.cv a:hover { text-decoration: underline 2px; }
 
 .cv li {
 	list-style: disc inside;
@@ -199,22 +199,22 @@ p {
 
 /* GUESTBOOK */ 
 .guestbook a:hover {
+  background-color: var(--light-link);
+}
+
+.dark .guestbook a:hover {
   background-color: var(--dark-1);
   color: var(--dark-bg);
 }
 
-.dark .guestbook a:hover {
-  background-color: var(--light-link);
-}
-
 /* QUOTES */ 
 .author {
-	color: var(--dark-2);
+	color: var(--light-2);
 	font-size: medium;
 }
 
 .dark .author {
-	color: var(--light-2);
+	color: var(--dark-2);
 	font-size: medium;
 }
 
@@ -237,30 +237,30 @@ pre {
 }
 
 blockquote {
-	background-color: #11111b;
-	padding: 0 0 0 10px;
-	border-left: 5px solid var(--dark-link);
-}
-
-.dark blockquote {
 	background-color: #E6D5C8;
 	padding: 0 0 0 10px;
 	border-left: 5px solid var(--light-link);
 }
 
+.dark blockquote {
+	background-color: #11111b;
+	padding: 0 0 0 10px;
+	border-left: 5px solid var(--dark-link);
+}
+
 blockquote p {
 	font-size: medium;
 	line-height: 32px;
 }
 
 ::selection{
-	background-color: var(--dark-1);
-	color: var(--dark-bg);
+	background-color: var(--light-1);
+	color: var(--light-bg);
 }
 
 .dark ::selection{
-	background-color: var(--light-1);
-	color: var(--light-bg);
+	background-color: var(--dark-1);
+	color: var(--dark-bg);
 }
 
 /* PRINT */