diff --git a/css/index.css b/css/index.css
index 1409763..6d0372d 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,17 +1,15 @@
 html {
-    font-family: "Open Sans", Arial;
-    color: #9F9FAA;
     scroll-behavior: smooth;
-    background-color: #242528;
 }
 
-html.light * {
+html * {
+    font-family: "Open Sans", Arial;
     color: #444;
     background-color: #F0F0F0;
 }
 
-html.light svg,
-html.light #about a {
+html svg,
+html #about a{
     color: #444;
     fill: #444;
 }
@@ -38,7 +36,6 @@ nav {
 nav a {
     margin: 0 1rem;
     text-decoration: none;
-    color: #9F9FAA;
 }
 
 nav a:hover {
@@ -200,7 +197,6 @@ svg:hover {
 
 #about a {
     text-decoration: underline;
-    color: #9F9FAA;
 }
 
 #about a:hover {
diff --git a/index.html b/index.html
index 2aa3f7d..c45c3d4 100644
--- a/index.html
+++ b/index.html
@@ -7,16 +7,34 @@
     <meta http-equiv="onion-location" content="http://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion">
     <!-- Dicourage indexing -->
     <meta name="robots" content="noindex, nofollow, noarchive">
-
-    <link rel="stylesheet", href="/css/index.css">
     <meta property="og:title" content="Parker M."/>
     <meta property="og:url" content="https://pkrm.dev/"/>
     <meta property="og:type" content="website"/>
     <meta property="og:description" content="My personal website. See my projects."/>
 
-    <script src="/js/toggle.js" defer></script>
-
     <title>Parker M.</title>
+
+    <script>
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark');
+        }
+    </script>
+    <style>
+        html.dark * {
+            color: #9F9FAA;
+            background-color: #242528;
+        }
+
+        html.dark svg,
+        html.dark #about a {
+            color: #9F9FAA;
+            fill: #9F9FAA;
+        }
+    </style>
+
+    <script src="/js/toggle.js" defer></script>
+    <link rel="preload", href="/css/index.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="styles.css"></noscript>
 </head>
 <body>
     <nav>
diff --git a/js/toggle.js b/js/toggle.js
index 275054a..11ba783 100644
--- a/js/toggle.js
+++ b/js/toggle.js
@@ -1,61 +1,61 @@
 const moon = document.getElementById('moon');
 const sun = document.getElementById('sun');
 
-if (!document.cookie.includes('preference')) {
-    setPreference(true);
+/**
+ * Check if the user has dark mode enabled
+ */
+if (localStorage.getItem('darkMode') === 'true') {
+    turnDark();
 } else {
-    const preference = document.cookie.split(';').find(cookie => cookie.includes('preference')).split('=')[1];
-    if (preference === 'true') {
-        turnLight();
+    turnLight();
+}
+
+/**
+ * Update local storage with the current theme
+ */
+function updateLocalStorage() {
+    if (document.documentElement.classList.contains('dark')) {
+        localStorage.setItem('darkMode', 'true');
     } else {
-        turnDark();
-    }
-
-}
-
-function setPreference(value) {
-    if (typeof value === 'boolean') {
-        const expires = new Date();
-        expires.setFullYear(expires.getFullYear() + 1); // 1 year
-        document.cookie = `preference=${value};expires=${expires.toUTCString()};path=/`;
-        turnLight();
+        localStorage.setItem('darkMode', 'false');
     }
 }
 
+/**
+ * Toggle the theme to dark
+ */
 function turnLight() {
-    document.documentElement.classList.add('light');
+    document.documentElement.classList.remove('dark');
 
-    moon.style.opacity = '0';
-    sun.style.opacity = '1';
-
-    setTimeout(() => {
-        moon.style.display = 'none';
-        sun.style.display = 'block';
-    }
-    , 100);
-}
-
-function turnDark() {
-    document.documentElement.classList.remove('light');
+    sun.style.display = 'none';
+    moon.style.display = 'block';
 
     sun.style.opacity = '0';
     moon.style.opacity = '1';
 
-    setTimeout(() => {
-        sun.style.display = 'none';
-        moon.style.display = 'block';
-    }
-    , 100);
+    updateLocalStorage();
 }
 
+/**
+ * Toggle the theme to light
+ */
+function turnDark() {
+    document.documentElement.classList.add('dark');
+
+    moon.style.display = 'none';
+    sun.style.display = 'block';
+
+    moon.style.opacity = '0';
+    sun.style.opacity = '1';
+
+    updateLocalStorage();
+}
+
+// Check for icon clicks
 moon.addEventListener('click', () => {
-    document.documentElement.classList.add('light');
-    setPreference(true);
-    turnLight();
+    turnDark();
 });
 
 sun.addEventListener('click', () => {
-    document.documentElement.classList.remove('light');
-    setPreference(false);
-    turnDark();
+    turnLight();
 });
