2 files changed, 80 insertions, 9 deletions

diff --git a/js/quest-log/index.html b/js/quest-log/index.html
index 7858df8..d6901b3 100644
--- a/js/quest-log/index.html
+++ b/js/quest-log/index.html
@@ -6,7 +6,6 @@
     <meta name="description" content="Tracking quests...different from a todo list in some secret and special way, I'm sure.">
     <title>Quest Log</title>
     <style>
-        /* Basic styling for the application */
         @font-face {
             font-family: 'Shantell Sans';
             src: url('./ShantellSans.woff2') format('woff2');
@@ -25,6 +24,8 @@
         body {
             margin: 20px;
             font-size: 16px;
+            background-color: var(--background-color);
+            color: var(--text-color);
         }
         h1, h2, button {
             font-family: 'ChicagoFLF', sans-serif;
@@ -38,40 +39,43 @@
             flex: 1;
             padding: 10px;
             font-size: 16px;
-            border: 1px solid #ccc;
+            border: 1px solid var(--border-color);
             border-radius: 4px;
             box-sizing: border-box;
+            background-color: var(--quest-new-bg);
+            color: var(--text-color);
         }
         button {
             padding: 10px;
             font-size: 16px;
-            border: 1px solid #ccc;
+            border: 1px solid var(--border-color);
             border-radius: 4px;
             cursor: pointer;
         }
         #add-quest-button {
-            background-color: rgb(0, 128, 128);;
-            color: white;
+            background-color: var(--button-bg);
+            color: var(--button-text);
             margin-left: 10px;
             flex-shrink: 0;
         }
         #add-quest-button:hover {
-            background-color: rgba(0, 128, 128, 0.75);;
+            background-color: var(--button-hover);
         }
         .quest {
             padding: 10px;
-            border: 1px solid #ccc;
+            border: 1px solid var(--border-color);
             margin-bottom: 10px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             box-sizing: border-box;
+            background-color: var(--quest-new-bg);
         }
         .quest.in-progress {
-            background-color: #ffffcc;
+            background-color: var(--quest-progress-bg);
         }
         .quest.complete {
-            background-color: #ccffcc;
+            background-color: var(--quest-complete-bg);
         }
         .hidden {
             display: none;
@@ -79,9 +83,60 @@
         button {
             margin-left: 10px;
         }
+        #theme-selector {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            padding: 5px;
+            border-radius: 4px;
+            border: 1px solid var(--border-color);
+            background-color: var(--quest-new-bg);
+            color: var(--text-color);
+        }
+        :root {
+            /* Light theme (default) */
+            --background-color: #ffffff;
+            --text-color: #000000;
+            --border-color: #ccc;
+            --button-bg: rgb(0, 128, 128);
+            --button-hover: rgba(0, 128, 128, 0.75);
+            --quest-new-bg: #ffffff;
+            --quest-progress-bg: #ffffcc;
+            --quest-complete-bg: #ccffcc;
+            --button-text: white;
+        }
+
+        [data-theme="dark"] {
+            --background-color: #240750;
+            --text-color: #ffffff;
+            --border-color: #344C64;
+            --button-bg: #57A6A1;
+            --button-hover: #577B8D;
+            --quest-new-bg: #344C64;
+            --quest-progress-bg: #577B8D;
+            --quest-complete-bg: #57A6A1;
+            --button-text: white;
+        }
+
+        [data-theme="bubblegum"] {
+            --background-color: #FFC1CC;
+            --text-color: #4a4a4a;
+            --border-color: #FFC1CC;
+            --button-bg: #EBFFC1;
+            --button-hover: #C1FFF4;
+            --quest-new-bg: #ffffff;
+            --quest-progress-bg: #C1FFF4;
+            --quest-complete-bg: #D5C1FF;
+            --button-text: #4a4a4a;
+        }
     </style>
 </head>
 <body>
+    <select id="theme-selector" onchange="changeTheme(this.value)">
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+        <option value="bubblegum">Bubblegum</option>
+    </select>
     <h1>Quest Log</h1>
     <div id="quest-input">
         <input type="text" id="new-quest" placeholder="Enter new quest" />
diff --git a/js/quest-log/quest.js b/js/quest-log/quest.js
index 0ba5a9d..8acd391 100644
--- a/js/quest-log/quest.js
+++ b/js/quest-log/quest.js
@@ -1,5 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
     loadQuests();
+    loadTheme();
     document.getElementById("new-quest").addEventListener("keypress", handleEnterKey(addQuest));
 });
 
@@ -149,3 +150,18 @@ const getShowCompletedState = () =>
 
 const toggleCompletedButtonText = showCompleted => 
     document.querySelector("button[onclick='toggleCompleted()']").innerText = showCompleted ? "Hide Completed Quests" : "View Completed Quests";
+
+const loadTheme = () => {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    applyTheme(savedTheme);
+    document.getElementById('theme-selector').value = savedTheme;
+};
+
+const changeTheme = (theme) => {
+    applyTheme(theme);
+    localStorage.setItem('theme', theme);
+};
+
+const applyTheme = (theme) => {
+    document.documentElement.setAttribute('data-theme', theme);
+};