diff --git a/package.json b/package.json
index 96b0a347..840740c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js
index 13dc3f59..f8f32228 100644
--- a/src/assets/scripts/index.js
+++ b/src/assets/scripts/index.js
@@ -52,15 +52,19 @@ if (window.location.hostname !== 'localhost') {
     document.body.classList.toggle('theme__dark');
   } else if (currentTheme === 'light') {
     document.body.classList.toggle('theme__light');
+  } else if (prefersDarkScheme) {
+    document.body.classList.toggle('theme__dark');
+  } else if (!prefersDarkScheme) {
+    document.body.classList.toggle('theme__light');
   }
 
   btn.addEventListener('click', () => {
-    console.log(prefersDarkScheme)
+    document.body.classList.toggle('theme__light');
+    document.body.classList.toggle('theme__dark');
+
     if (prefersDarkScheme) {
-      document.body.classList.toggle('theme__light');
       theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
     } else {
-      document.body.classList.toggle('theme__dark');
       theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
     }
     localStorage?.setItem('theme', theme);
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index c51cc15d..1e8d9252 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -9,12 +9,12 @@ html {
 }
 
 ::-moz-selection {
-  color: var(--white);
+  color: var(--color-lightest);
   background: var(--selection-color);
 }
 
 ::selection {
-  color: var(--white);
+  color: var(--color-lightest);
   background: var(--selection-color);
 }
 
@@ -489,10 +489,13 @@ footer nav {
 
 /* theme toggle */
 .theme__toggle,
-.theme__toggle svg{
+.theme__toggle svg {
   cursor: pointer;
 }
 
+.theme__toggle > .light svg { stroke: var(--sun) !important; }
+.theme__toggle > .dark svg { stroke: var(--moon) !important; }
+
 .theme__dark .theme__toggle > .light {
   display: inline;
 }
@@ -501,11 +504,11 @@ footer nav {
   display: none;
 }
 
-.theme__toggle > .light {
+.theme__light .theme__toggle > .light {
   display: none;
 }
 
-.theme__toggle > .dark {
+.theme__light .theme__toggle > .dark {
   display: inline;
 }
 
diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css
index df4c4294..7418b346 100644
--- a/src/assets/styles/partials/vars.css
+++ b/src/assets/styles/partials/vars.css
@@ -27,9 +27,15 @@
   --white: #fff;
   --black: #000;
 
+  --gray-light: var(--gray-200);
+  --gray-lighter: var(--gray-50);
+  --gray-lightest: #fbfbfb;
+  --gray-dark: var(--gray-700);
+  --blue-dark: #091222;
+
   /* theme */
-  --color-lightest: var(--white);
-  --color-darkest: var(--black);
+  --color-lightest: var(--gray-lightest);
+  --color-darkest: var(--blue-dark);
   --text-color: var(--color-darkest);
   --background-color: var(--color-lightest);
   --text-color-inverted: var(--color-lightest);
@@ -37,9 +43,6 @@
   --accent-color: var(--blue-600);
   --accent-color-hover: var(--blue-800);
   --selection-color: var(--accent-color);
-  --gray-light: var(--gray-200);
-  --gray-lighter: var(--gray-50);
-  --gray-dark: var(--gray-700);
 
   --brand-github: #333;
   --brand-hey: #5522fa;
@@ -50,6 +53,8 @@
   --brand-buy-me-a-coffee: #ffdd00;
   --brand-rss: #f26522;
   --webrings: #ec8fd0;
+  --moon: #655ad2;
+  --sun: #f9d71c;
 
   /* fonts */
   --font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
@@ -100,10 +105,10 @@
 /* dark theme */
 @media (prefers-color-scheme: dark) {
   :root {
-    --text-color: var(--white);
-    --background-color: var(--black);
-    --text-color-inverted: var(--black);
-    --background-color-inverted: var(--white);
+    --text-color: var(--color-lightest);
+    --background-color: var(--color-darkest);
+    --text-color-inverted: var(--color-darkest);
+    --background-color-inverted: var(--color-lightest);
     --accent-color: var(--blue-400);
     --accent-color-hover: var(--blue-200);
     --gray-light: var(--gray-900);
@@ -113,11 +118,25 @@
   }
 }
 
+:root body.theme__light {
+  --text-color: var(--color-darkest);
+  --background-color: var(--color-lightest);
+  --text-color-inverted: var(--color-lightest);
+  --background-color-inverted: var(--color-darkest);
+  --accent-color: var(--blue-600);
+  --accent-color-hover: var(--blue-800);
+  --selection-color: var(--accent-color);
+  --gray-light: var(--gray-200);
+  --gray-lighter: var(--gray-50);
+  --gray-dark: var(--gray-700);
+  --brand-github: #333;
+}
+
 :root body.theme__dark {
-  --text-color: var(--white);
-  --background-color: var(--black);
-  --text-color-inverted: var(--black);
-  --background-color-inverted: var(--white);
+  --text-color: var(--color-lightest);
+  --background-color: var(--color-darkest);
+  --text-color-inverted: var(--color-darkest);
+  --background-color-inverted: var(--color-lightest);
   --accent-color: var(--blue-400);
   --accent-color-hover: var(--blue-200);
   --gray-light: var(--gray-900);