Themes are now persistent even when partially specified (ie just font

doesn't effect the colorscheme)

1 files changed, 31 insertions, 0 deletions

diff --git a/src/layouts/Terminal.astro b/src/layouts/Terminal.astro
index 3683c18..21dcc60 100644
--- a/src/layouts/Terminal.astro
+++ b/src/layouts/Terminal.astro
@@ -34,3 +34,34 @@ const { path: title } = Astro.props;
         font-weight: 300;
     }
 </style>
+<script>
+    function setTheme(theme) {
+        const root = document.documentElement;
+
+        // Get current values from root
+        const computed = getComputedStyle(root);
+        const existingTheme = {};
+
+        const themeKeys = ["primary", "secondary", "accent", "extra", "text", "alt", "background", "font"];
+
+        themeKeys.forEach(key => {
+            existingTheme[key] = theme[key] ?? computed.getPropertyValue(`--${key}`).trim();
+            root.style.setProperty(`--${key}`, existingTheme[key]);
+        });
+
+        localStorage.setItem("theme", JSON.stringify(existingTheme));
+    }
+
+    function loadTheme() {
+        const savedTheme = localStorage.getItem("theme");
+        if (savedTheme) {
+            setTheme(JSON.parse(savedTheme));
+        }
+    }
+
+    // Attach to window so it's accessible globally
+    window.setTheme = setTheme;
+
+    // Load theme on page load
+    loadTheme();
+</script>