From 72395ba75d765b1df17e15a9e3e3ebf0ab4670e6 Mon Sep 17 00:00:00 2001
From: semanticdata <contact@miguelpimentel.do>
Date: Thu, 15 Jan 2026 10:08:24 -0600
Subject: [PATCH 1/5] new colors system

---
 .gitignore                  |   2 +
 packages/newtab/newtab.html |   9 +++
 packages/sidebar/panel.html |   9 +++
 scripts/copy-shared.js      |   2 +-
 scripts/watch-shared.js     |   2 +-
 shared/colors.js            | 151 ++++++++++++++++++++++++++++++++++++
 shared/preload.js           |  17 +++-
 shared/script.js            |  44 ++++++++---
 8 files changed, 223 insertions(+), 13 deletions(-)
 create mode 100644 shared/colors.js

diff --git a/.gitignore b/.gitignore
index c7e062c..be3cf8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,9 +6,11 @@ packages/sidebar/script.js
 packages/sidebar/icon.svg
 packages/sidebar/preload.js
 packages/sidebar/export.js
+packages/sidebar/colors.js
 packages/newtab/styles.css
 packages/newtab/script.js
 packages/newtab/icon.svg
 packages/newtab/preload.js
 packages/newtab/export.js
+packages/newtab/colors.js
 web-ext-artifacts
diff --git a/packages/newtab/newtab.html b/packages/newtab/newtab.html
index 7b9934e..b23c2bb 100644
--- a/packages/newtab/newtab.html
+++ b/packages/newtab/newtab.html
@@ -56,6 +56,14 @@
         <div class="col-right" style="position: relative;">
             <!-- Settings Menu Popover -->
             <div id="settings-menu" class="settings-menu" hidden>
+                <div class="setting-row">
+                    <label for="theme-selector">Theme</label>
+                </div>
+                <select id="theme-selector">
+                    <option value="default">Default</option>
+                    <option value="catppuccin">Catppuccin</option>
+                </select>
+                
                 <div class="setting-row">
                     <label for="font-slider">Font Size</label>
                     <span id="font-display">18px</span>
@@ -100,6 +108,7 @@
     </footer>
 
     <script type="text/javascript" src="script.js"></script>
+    <script type="text/javascript" src="colors.js"></script>
     <script type="text/javascript" src="export.js"></script>
 </body>
 
diff --git a/packages/sidebar/panel.html b/packages/sidebar/panel.html
index 22a16a3..07f9ff5 100644
--- a/packages/sidebar/panel.html
+++ b/packages/sidebar/panel.html
@@ -56,6 +56,14 @@
         <div class="col-right" style="position: relative;">
             <!-- Settings Menu Popover -->
             <div id="settings-menu" class="settings-menu" hidden>
+                <div class="setting-row">
+                    <label for="theme-selector">Theme</label>
+                </div>
+                <select id="theme-selector">
+                    <option value="default">Default</option>
+                    <option value="catppuccin">Catppuccin</option>
+                </select>
+                
                 <div class="setting-row">
                     <label for="font-slider">Font Size</label>
                     <span id="font-display">18px</span>
@@ -100,6 +108,7 @@
     </footer>
 
     <script type="text/javascript" src="script.js"></script>
+    <script type="text/javascript" src="colors.js"></script>
     <script type="text/javascript" src="export.js"></script>
 </body>
 
diff --git a/scripts/copy-shared.js b/scripts/copy-shared.js
index d957e60..6b2a481 100644
--- a/scripts/copy-shared.js
+++ b/scripts/copy-shared.js
@@ -6,7 +6,7 @@ const path = require('path');
 // Configuration
 const sharedDir = path.join(__dirname, '../shared');
 const packagesDir = path.join(__dirname, '../packages');
-const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js'];
+const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js', 'colors.js'];
 const targets = ['newtab', 'sidebar'];
 
 // Colors for console output
diff --git a/scripts/watch-shared.js b/scripts/watch-shared.js
index 7f9c77f..67791cb 100644
--- a/scripts/watch-shared.js
+++ b/scripts/watch-shared.js
@@ -8,7 +8,7 @@ const { build } = require('./copy-shared.js');
 
 // Configuration
 const sharedDir = path.join(__dirname, '../shared');
-const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js'];
+const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js', 'colors.js'];
 
 // Colors for console output
 const colors = {
diff --git a/shared/colors.js b/shared/colors.js
new file mode 100644
index 0000000..12eb40e
--- /dev/null
+++ b/shared/colors.js
@@ -0,0 +1,151 @@
+// Color Management System for NoteKeeper
+const colorManager = {
+  // Default themes (original)
+  defaults: {
+    light: {
+      name: 'Default Light',
+      bg: '#ffffff',
+      fg: '#1a1a1a',
+      accent: '#27ae60',
+      border: '#e0e0e0',
+      subtle: '#666',
+      shadow: 'rgba(0, 0, 0, 0.1)'
+    },
+    dark: {
+      name: 'Default Dark',
+      bg: '#111111',
+      fg: '#f0f0f0',
+      accent: '#27ae60',
+      border: '#333333',
+      subtle: '#888',
+      shadow: 'rgba(0, 0, 0, 0.5)'
+    }
+  },
+
+  // Catppuccin-inspired color presets
+  catppuccin: {
+    latte: {
+      name: 'Catppuccin Latte',
+      bg: '#eff1f5',
+      fg: '#4c4f69',
+      accent: '#1e66f5',
+      border: '#dce0e8',
+      subtle: '#8c8fa1',
+      shadow: 'rgba(220, 224, 232, 0.5)'
+    },
+    frappe: {
+      name: 'Catppuccin Frappé',
+      bg: '#303446',
+      fg: '#c6d0f5',
+      accent: '#8caaee',
+      border: '#51576d',
+      subtle: '#838ba7',
+      shadow: 'rgba(30, 32, 48, 0.5)'
+    }
+  },
+
+  // Initialize color system
+  init() {
+    const savedTheme = localStorage.getItem('notekeeper-theme') || 'default';
+    this.applyTheme(savedTheme);
+  },
+
+  // Apply theme colors
+  applyTheme(themeName) {
+    let theme;
+    let isDarkMode = false;
+    
+    // Handle theme selection
+    if (themeName === 'default') {
+      // Use original light/dark toggle behavior
+      const currentMode = localStorage.getItem('theme') || 'light';
+      theme = this.defaults[currentMode];
+      isDarkMode = currentMode === 'dark';
+    } else if (themeName === 'catppuccin') {
+      // Use Catppuccin behavior
+      const currentVariant = localStorage.getItem('catppuccin-variant') || 'latte';
+      theme = this.catppuccin[currentVariant];
+      isDarkMode = currentVariant === 'frappe';
+    } else {
+      // Direct theme selection
+      if (themeName.startsWith('catppuccin-')) {
+        const catppuccinVariant = themeName.replace('catppuccin-', '');
+        theme = this.catppuccin[catppuccinVariant];
+        isDarkMode = catppuccinVariant === 'frappe';
+      } else {
+        theme = this.defaults[themeName];
+        isDarkMode = themeName === 'dark';
+      }
+    }
+    
+    if (!theme) return;
+
+    // Apply colors to CSS custom properties
+    Object.entries(theme).forEach(([key, value]) => {
+      if (key !== 'name') {
+        document.documentElement.style.setProperty(`--user-${key}`, value);
+      }
+    });
+
+    // Update theme attribute for existing CSS
+    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+    
+    // Save preference
+    localStorage.setItem('notekeeper-theme', themeName);
+    
+    // Update theme toggle aria-label
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+      const nextTheme = this.getNextTheme(themeName);
+      const isNextDark = nextTheme === 'dark' || nextTheme === 'frappe';
+      themeToggle.setAttribute('aria-label', `Switch to ${isNextDark ? 'light' : 'dark'} theme`);
+    }
+  },
+
+  // Toggle between themes
+  toggleTheme() {
+    const currentTheme = localStorage.getItem('notekeeper-theme') || 'default';
+
+    if (currentTheme === 'default') {
+      // Toggle light/dark in default mode
+      const currentMode = localStorage.getItem('theme') || 'light';
+      const nextMode = currentMode === 'light' ? 'dark' : 'light';
+      localStorage.setItem('theme', nextMode);
+      this.applyTheme('default');
+    } else if (currentTheme === 'catppuccin') {
+      // Toggle latte/frappe in catppuccin mode
+      const currentVariant = localStorage.getItem('catppuccin-variant') || 'latte';
+      const nextVariant = currentVariant === 'latte' ? 'frappe' : 'latte';
+      localStorage.setItem('catppuccin-variant', nextVariant);
+      this.applyTheme('catppuccin');
+    } else {
+      // Direct theme selection - toggle between default themes
+      const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
+      localStorage.setItem('notekeeper-theme', nextTheme);
+      localStorage.setItem('theme', nextTheme);
+      this.applyTheme('default');
+    }
+  },
+
+  // Get next theme for aria-label (informational only)
+  getNextTheme(currentTheme) {
+    if (currentTheme === 'default') {
+      const currentMode = localStorage.getItem('theme') || 'light';
+      return currentMode === 'light' ? 'dark' : 'light';
+    } else if (currentTheme === 'catppuccin') {
+      const currentVariant = localStorage.getItem('catppuccin-variant') || 'latte';
+      return currentVariant === 'latte' ? 'frappe' : 'latte';
+    }
+    return currentTheme === 'light' ? 'dark' : 'light';
+  },
+
+  // Get current theme
+  getCurrentTheme() {
+    return localStorage.getItem('notekeeper-theme') || 'default';
+  }
+};
+
+// Initialize on DOM load
+document.addEventListener('DOMContentLoaded', () => {
+  colorManager.init();
+});
diff --git a/shared/preload.js b/shared/preload.js
index 30f0f4f..cea7573 100644
--- a/shared/preload.js
+++ b/shared/preload.js
@@ -1,7 +1,20 @@
 // Prevent FOUC by setting theme and font size before page renders
-const savedTheme = localStorage.getItem("theme");
+const savedTheme = localStorage.getItem("notekeeper-theme") || localStorage.getItem("theme");
 const sysTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-document.documentElement.setAttribute("data-theme", savedTheme || (sysTheme ? "dark" : "light"));
+
+// Determine actual theme to apply
+let actualTheme = savedTheme;
+if (savedTheme === 'default') {
+  // For default theme, check the legacy theme storage
+  const legacyTheme = localStorage.getItem("theme");
+  actualTheme = legacyTheme || (sysTheme ? "dark" : "light");
+} else if (savedTheme === 'catppuccin') {
+  // For catppuccin theme, check the variant storage
+  const catppuccinVariant = localStorage.getItem("catppuccin-variant") || "latte";
+  actualTheme = catppuccinVariant === "frappe" ? "dark" : "light";
+}
+
+document.documentElement.setAttribute("data-theme", actualTheme || (sysTheme ? "dark" : "light"));
 
 // Pre-load font size
 const savedSize = localStorage.getItem("fontsize");
diff --git a/shared/script.js b/shared/script.js
index abd2d34..83483a3 100644
--- a/shared/script.js
+++ b/shared/script.js
@@ -7,6 +7,7 @@ const els = {
   slider: document.getElementById("font-slider"),
   fontDisplay: document.getElementById("font-display"),
   fontFamily: document.getElementById("font-family"),
+  themeSelector: document.getElementById("theme-selector"),
   words: document.getElementById("word-count"),
   status: document.getElementById("save-status"),
 };
@@ -82,16 +83,9 @@ const localStore = {
   },
 };
 
-// Theme Logic
+// Theme Logic - Now uses colorManager
 const toggleTheme = () => {
-  const next =
-    els.html.getAttribute("data-theme") === "dark" ? "light" : "dark";
-  els.html.setAttribute("data-theme", next);
-  localStore.set("theme", next);
-  els.toggleTheme.setAttribute(
-    "aria-label",
-    `Switch to ${next === "dark" ? "light" : "dark"}`
-  );
+  colorManager.toggleTheme();
 };
 
 els.toggleTheme.addEventListener("click", toggleTheme);
@@ -127,6 +121,10 @@ els.fontFamily.addEventListener("change", (e) => {
   updateFontFamily(e.target.value);
 });
 
+els.themeSelector.addEventListener("change", (e) => {
+  colorManager.applyTheme(e.target.value);
+});
+
 // Close menu when clicking outside
 document.addEventListener("click", (e) => {
   if (
@@ -252,6 +250,34 @@ if (storedFontFamily) {
   updateFontFamily(storedFontFamily);
 }
 
+// Init Theme Selector
+const currentTheme = colorManager.getCurrentTheme();
+if (els.themeSelector) {
+  els.themeSelector.value = currentTheme;
+}
+
+// Migrate legacy theme storage for backward compatibility
+const migrateLegacyTheme = () => {
+  const legacyTheme = localStore.get("theme");
+  if (legacyTheme && !localStorage.getItem('notekeeper-theme')) {
+    // Migrate old theme to new system
+    if (legacyTheme === 'light' || legacyTheme === 'dark') {
+      localStorage.setItem('notekeeper-theme', legacyTheme);
+      localStorage.setItem('theme', legacyTheme);
+    } else if (legacyTheme === 'latte') {
+      localStorage.setItem('notekeeper-theme', 'catppuccin');
+      localStorage.setItem('catppuccin-variant', 'latte');
+    } else if (legacyTheme === 'frappe') {
+      localStorage.setItem('notekeeper-theme', 'catppuccin');
+      localStorage.setItem('catppuccin-variant', 'frappe');
+    }
+    // Remove old theme key
+    localStore.remove("theme");
+  }
+};
+
+migrateLegacyTheme();
+
 els.note.addEventListener("input", (e) => {
   updateStats(e.target.value);
   save(e.target.value);

From ed236bbcb2b352b13514cc12ad562ad57a2eccee Mon Sep 17 00:00:00 2001
From: semanticdata <contact@miguelpimentel.do>
Date: Thu, 15 Jan 2026 10:08:46 -0600
Subject: [PATCH 2/5] adjust theme dropdown

---
 shared/styles.css | 50 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/shared/styles.css b/shared/styles.css
index d9ff2c3..9f19a18 100644
--- a/shared/styles.css
+++ b/shared/styles.css
@@ -1,11 +1,21 @@
 :root {
-  --bg: #ffffff;
-  --fg: #1a1a1a;
-  --border: #e0e0e0;
-  --subtle: #666;
-  --accent: #27ae60;
-  --shadow: rgba(0, 0, 0, 0.1);
-
+  /* User Customizable Colors - Set by colorManager */
+  --user-bg: #eff1f5;
+  --user-fg: #4c4f69;
+  --user-accent: #1e66f5;
+  --user-border: #dce0e8;
+  --user-subtle: #8c8fa1;
+  --user-shadow: rgba(220, 224, 232, 0.5);
+
+  /* Derived Colors - Use user colors */
+  --bg: var(--user-bg);
+  --fg: var(--user-fg);
+  --accent: var(--user-accent);
+  --border: var(--user-border);
+  --subtle: var(--user-subtle);
+  --shadow: var(--user-shadow);
+
+  /* Font & Layout */
   --font-ui: ui-monospace, SFMono-Regular, Menlo, monospace;
   --font-body: "Georgia", serif;
   --measure: 65ch;
@@ -14,11 +24,12 @@
 }
 
 [data-theme="dark"] {
-  --bg: #111111;
-  --fg: #f0f0f0;
-  --border: #333333;
-  --subtle: #888;
-  --shadow: rgba(0, 0, 0, 0.5);
+  --user-bg: #303446;
+  --user-fg: #c6d0f5;
+  --user-accent: #8caaee;
+  --user-border: #51576d;
+  --user-subtle: #838ba7;
+  --user-shadow: rgba(30, 32, 48, 0.5);
 }
 
 *,
@@ -221,7 +232,20 @@ textarea:focus {
   /* font-size: 0.85rem; */
 }
 
-#font-family:focus {
+#font-family:focus,
+#theme-selector:focus {
   outline: none;
   border-color: var(--subtle);
+}
+
+#theme-selector {
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: var(--font-ui);
+  /* font-size: 0.85rem; */
 }
\ No newline at end of file

From bf30973ee266532adbbfaab4dcf784d08a1aca74 Mon Sep 17 00:00:00 2001
From: semanticdata <contact@miguelpimentel.do>
Date: Thu, 15 Jan 2026 10:24:17 -0600
Subject: [PATCH 3/5] new theme colors solarized and nord

---
 packages/newtab/newtab.html |  2 +
 packages/sidebar/panel.html |  2 +
 shared/colors.js            | 88 +++++++++++++++++++++++++++++++++++--
 shared/preload.js           |  8 ++++
 shared/script.js            |  8 ++++
 5 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/packages/newtab/newtab.html b/packages/newtab/newtab.html
index b23c2bb..b1be9ba 100644
--- a/packages/newtab/newtab.html
+++ b/packages/newtab/newtab.html
@@ -62,6 +62,8 @@
                 <select id="theme-selector">
                     <option value="default">Default</option>
                     <option value="catppuccin">Catppuccin</option>
+                    <option value="nord">Nord</option>
+                    <option value="solarized">Solarized</option>
                 </select>
                 
                 <div class="setting-row">
diff --git a/packages/sidebar/panel.html b/packages/sidebar/panel.html
index 07f9ff5..01f9d2a 100644
--- a/packages/sidebar/panel.html
+++ b/packages/sidebar/panel.html
@@ -62,6 +62,8 @@
                 <select id="theme-selector">
                     <option value="default">Default</option>
                     <option value="catppuccin">Catppuccin</option>
+                    <option value="nord">Nord</option>
+                    <option value="solarized">Solarized</option>
                 </select>
                 
                 <div class="setting-row">
diff --git a/shared/colors.js b/shared/colors.js
index 12eb40e..213af43 100644
--- a/shared/colors.js
+++ b/shared/colors.js
@@ -44,6 +44,50 @@ const colorManager = {
     }
   },
 
+  // Nord theme - Arctic, north-bluish color palette
+  nord: {
+    light: {
+      name: 'Nord Light',
+      bg: '#eceff4',
+      fg: '#4c566a',
+      accent: '#5e81ac',
+      border: '#d8dee9',
+      subtle: '#81a1c1',
+      shadow: 'rgba(216, 222, 233, 0.5)'
+    },
+    dark: {
+      name: 'Nord Dark',
+      bg: '#2e3440',
+      fg: '#d8dee9',
+      accent: '#88c0d0',
+      border: '#4c566a',
+      subtle: '#81a1c1',
+      shadow: 'rgba(46, 52, 64, 0.5)'
+    }
+  },
+
+  // Solarized - Precision colors for readability
+  solarized: {
+    light: {
+      name: 'Solarized Light',
+      bg: '#fdf6e3',
+      fg: '#657b83',
+      accent: '#268bd2',
+      border: '#93a1a1',
+      subtle: '#586e75',
+      shadow: 'rgba(147, 161, 161, 0.5)'
+    },
+    dark: {
+      name: 'Solarized Dark',
+      bg: '#002b36',
+      fg: '#839496',
+      accent: '#2aa198',
+      border: '#073642',
+      subtle: '#586e75',
+      shadow: 'rgba(7, 54, 66, 0.5)'
+    }
+  },
+
   // Initialize color system
   init() {
     const savedTheme = localStorage.getItem('notekeeper-theme') || 'default';
@@ -54,7 +98,7 @@ const colorManager = {
   applyTheme(themeName) {
     let theme;
     let isDarkMode = false;
-    
+
     // Handle theme selection
     if (themeName === 'default') {
       // Use original light/dark toggle behavior
@@ -66,18 +110,36 @@ const colorManager = {
       const currentVariant = localStorage.getItem('catppuccin-variant') || 'latte';
       theme = this.catppuccin[currentVariant];
       isDarkMode = currentVariant === 'frappe';
+    } else if (themeName === 'nord') {
+      // Use Nord behavior
+      const currentVariant = localStorage.getItem('nord-variant') || 'light';
+      theme = this.nord[currentVariant];
+      isDarkMode = currentVariant === 'dark';
+    } else if (themeName === 'solarized') {
+      // Use Solarized behavior
+      const currentVariant = localStorage.getItem('solarized-variant') || 'light';
+      theme = this.solarized[currentVariant];
+      isDarkMode = currentVariant === 'dark';
     } else {
       // Direct theme selection
       if (themeName.startsWith('catppuccin-')) {
         const catppuccinVariant = themeName.replace('catppuccin-', '');
         theme = this.catppuccin[catppuccinVariant];
         isDarkMode = catppuccinVariant === 'frappe';
+      } else if (themeName.startsWith('nord-')) {
+        const nordVariant = themeName.replace('nord-', '');
+        theme = this.nord[nordVariant];
+        isDarkMode = nordVariant === 'dark';
+      } else if (themeName.startsWith('solarized-')) {
+        const solarizedVariant = themeName.replace('solarized-', '');
+        theme = this.solarized[solarizedVariant];
+        isDarkMode = solarizedVariant === 'dark';
       } else {
         theme = this.defaults[themeName];
         isDarkMode = themeName === 'dark';
       }
     }
-    
+
     if (!theme) return;
 
     // Apply colors to CSS custom properties
@@ -89,10 +151,10 @@ const colorManager = {
 
     // Update theme attribute for existing CSS
     document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
-    
+
     // Save preference
     localStorage.setItem('notekeeper-theme', themeName);
-    
+
     // Update theme toggle aria-label
     const themeToggle = document.getElementById('theme-toggle');
     if (themeToggle) {
@@ -118,6 +180,18 @@ const colorManager = {
       const nextVariant = currentVariant === 'latte' ? 'frappe' : 'latte';
       localStorage.setItem('catppuccin-variant', nextVariant);
       this.applyTheme('catppuccin');
+    } else if (currentTheme === 'nord') {
+      // Toggle light/dark in nord mode
+      const currentVariant = localStorage.getItem('nord-variant') || 'light';
+      const nextVariant = currentVariant === 'light' ? 'dark' : 'light';
+      localStorage.setItem('nord-variant', nextVariant);
+      this.applyTheme('nord');
+    } else if (currentTheme === 'solarized') {
+      // Toggle light/dark in solarized mode
+      const currentVariant = localStorage.getItem('solarized-variant') || 'light';
+      const nextVariant = currentVariant === 'light' ? 'dark' : 'light';
+      localStorage.setItem('solarized-variant', nextVariant);
+      this.applyTheme('solarized');
     } else {
       // Direct theme selection - toggle between default themes
       const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
@@ -135,6 +209,12 @@ const colorManager = {
     } else if (currentTheme === 'catppuccin') {
       const currentVariant = localStorage.getItem('catppuccin-variant') || 'latte';
       return currentVariant === 'latte' ? 'frappe' : 'latte';
+    } else if (currentTheme === 'nord') {
+      const currentVariant = localStorage.getItem('nord-variant') || 'light';
+      return currentVariant === 'light' ? 'dark' : 'light';
+    } else if (currentTheme === 'solarized') {
+      const currentVariant = localStorage.getItem('solarized-variant') || 'light';
+      return currentVariant === 'light' ? 'dark' : 'light';
     }
     return currentTheme === 'light' ? 'dark' : 'light';
   },
diff --git a/shared/preload.js b/shared/preload.js
index cea7573..e1efa6e 100644
--- a/shared/preload.js
+++ b/shared/preload.js
@@ -12,6 +12,14 @@ if (savedTheme === 'default') {
   // For catppuccin theme, check the variant storage
   const catppuccinVariant = localStorage.getItem("catppuccin-variant") || "latte";
   actualTheme = catppuccinVariant === "frappe" ? "dark" : "light";
+} else if (savedTheme === 'nord') {
+  // For nord theme, check the variant storage
+  const nordVariant = localStorage.getItem("nord-variant") || "light";
+  actualTheme = nordVariant === "dark" ? "dark" : "light";
+} else if (savedTheme === 'solarized') {
+  // For solarized theme, check the variant storage
+  const solarizedVariant = localStorage.getItem("solarized-variant") || "light";
+  actualTheme = solarizedVariant === "dark" ? "dark" : "light";
 }
 
 document.documentElement.setAttribute("data-theme", actualTheme || (sysTheme ? "dark" : "light"));
diff --git a/shared/script.js b/shared/script.js
index 83483a3..b4f3f84 100644
--- a/shared/script.js
+++ b/shared/script.js
@@ -274,6 +274,14 @@ const migrateLegacyTheme = () => {
     // Remove old theme key
     localStore.remove("theme");
   }
+
+  // Initialize default variants for new themes if not set
+  if (!localStorage.getItem('nord-variant')) {
+    localStorage.setItem('nord-variant', 'light');
+  }
+  if (!localStorage.getItem('solarized-variant')) {
+    localStorage.setItem('solarized-variant', 'light');
+  }
 };
 
 migrateLegacyTheme();

From 8587df1f97ac49355a0700310491a22a169bc920 Mon Sep 17 00:00:00 2001
From: semanticdata <contact@miguelpimentel.do>
Date: Thu, 15 Jan 2026 10:47:13 -0600
Subject: [PATCH 4/5] show current theme in settings selector

---
 packages/newtab/newtab.html |  2 +-
 packages/sidebar/panel.html |  2 +-
 shared/colors.js            | 23 ++++++++++++++++++++---
 shared/script.js            | 14 --------------
 4 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/newtab/newtab.html b/packages/newtab/newtab.html
index b1be9ba..6ca1891 100644
--- a/packages/newtab/newtab.html
+++ b/packages/newtab/newtab.html
@@ -109,8 +109,8 @@
         </div>
     </footer>
 
-    <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="colors.js"></script>
+    <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="export.js"></script>
 </body>
 
diff --git a/packages/sidebar/panel.html b/packages/sidebar/panel.html
index 01f9d2a..d748b6e 100644
--- a/packages/sidebar/panel.html
+++ b/packages/sidebar/panel.html
@@ -109,8 +109,8 @@
         </div>
     </footer>
 
-    <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="colors.js"></script>
+    <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="export.js"></script>
 </body>
 
diff --git a/shared/colors.js b/shared/colors.js
index 213af43..26ad94f 100644
--- a/shared/colors.js
+++ b/shared/colors.js
@@ -158,9 +158,8 @@ const colorManager = {
     // Update theme toggle aria-label
     const themeToggle = document.getElementById('theme-toggle');
     if (themeToggle) {
-      const nextTheme = this.getNextTheme(themeName);
-      const isNextDark = nextTheme === 'dark' || nextTheme === 'frappe';
-      themeToggle.setAttribute('aria-label', `Switch to ${isNextDark ? 'light' : 'dark'} theme`);
+      const isCurrentDark = isDarkMode;
+      themeToggle.setAttribute('aria-label', `Switch to ${isCurrentDark ? 'light' : 'dark'} theme`);
     }
   },
 
@@ -225,7 +224,25 @@ const colorManager = {
   }
 };
 
+// Initialize theme selector dropdown value
+const initThemeSelector = () => {
+  const currentTheme = colorManager.getCurrentTheme();
+  const themeSelector = document.getElementById('theme-selector');
+  if (themeSelector) {
+    themeSelector.value = currentTheme;
+  }
+};
+
 // Initialize on DOM load
 document.addEventListener('DOMContentLoaded', () => {
+  // Initialize default variants for new themes if not set
+  if (!localStorage.getItem('nord-variant')) {
+    localStorage.setItem('nord-variant', 'light');
+  }
+  if (!localStorage.getItem('solarized-variant')) {
+    localStorage.setItem('solarized-variant', 'light');
+  }
+
   colorManager.init();
+  initThemeSelector();
 });
diff --git a/shared/script.js b/shared/script.js
index b4f3f84..1b5e0bf 100644
--- a/shared/script.js
+++ b/shared/script.js
@@ -250,12 +250,6 @@ if (storedFontFamily) {
   updateFontFamily(storedFontFamily);
 }
 
-// Init Theme Selector
-const currentTheme = colorManager.getCurrentTheme();
-if (els.themeSelector) {
-  els.themeSelector.value = currentTheme;
-}
-
 // Migrate legacy theme storage for backward compatibility
 const migrateLegacyTheme = () => {
   const legacyTheme = localStore.get("theme");
@@ -274,14 +268,6 @@ const migrateLegacyTheme = () => {
     // Remove old theme key
     localStore.remove("theme");
   }
-
-  // Initialize default variants for new themes if not set
-  if (!localStorage.getItem('nord-variant')) {
-    localStorage.setItem('nord-variant', 'light');
-  }
-  if (!localStorage.getItem('solarized-variant')) {
-    localStorage.setItem('solarized-variant', 'light');
-  }
 };
 
 migrateLegacyTheme();

From b302bd9bcecf3695ca8056361c0110c860118e3c Mon Sep 17 00:00:00 2001
From: semanticdata <contact@miguelpimentel.do>
Date: Thu, 15 Jan 2026 10:58:37 -0600
Subject: [PATCH 5/5] add dracula and alucard themes

---
 packages/newtab/newtab.html |  1 +
 packages/sidebar/panel.html |  1 +
 shared/colors.js            | 61 +++++++++++++++++++++++++++++++------
 shared/preload.js           |  6 +++-
 4 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/packages/newtab/newtab.html b/packages/newtab/newtab.html
index 6ca1891..a3579e3 100644
--- a/packages/newtab/newtab.html
+++ b/packages/newtab/newtab.html
@@ -64,6 +64,7 @@
                     <option value="catppuccin">Catppuccin</option>
                     <option value="nord">Nord</option>
                     <option value="solarized">Solarized</option>
+                    <option value="dracula">Dracula</option>
                 </select>
                 
                 <div class="setting-row">
diff --git a/packages/sidebar/panel.html b/packages/sidebar/panel.html
index d748b6e..c7250ae 100644
--- a/packages/sidebar/panel.html
+++ b/packages/sidebar/panel.html
@@ -64,6 +64,7 @@
                     <option value="catppuccin">Catppuccin</option>
                     <option value="nord">Nord</option>
                     <option value="solarized">Solarized</option>
+                    <option value="dracula">Dracula</option>
                 </select>
                 
                 <div class="setting-row">
diff --git a/shared/colors.js b/shared/colors.js
index 26ad94f..62653f4 100644
--- a/shared/colors.js
+++ b/shared/colors.js
@@ -22,7 +22,7 @@ const colorManager = {
     }
   },
 
-  // Catppuccin-inspired color presets
+  // Catppuccin
   catppuccin: {
     latte: {
       name: 'Catppuccin Latte',
@@ -44,7 +44,7 @@ const colorManager = {
     }
   },
 
-  // Nord theme - Arctic, north-bluish color palette
+  // Nord theme
   nord: {
     light: {
       name: 'Nord Light',
@@ -66,7 +66,7 @@ const colorManager = {
     }
   },
 
-  // Solarized - Precision colors for readability
+  // Solarized
   solarized: {
     light: {
       name: 'Solarized Light',
@@ -88,6 +88,28 @@ const colorManager = {
     }
   },
 
+  // Dracula
+  dracula: {
+    dark: {
+      name: 'Dracula',
+      bg: '#282A36',
+      fg: '#F8F8F2',
+      accent: '#FF79C6',
+      border: '#44475A',
+      subtle: '#6272A4',
+      shadow: 'rgba(40, 42, 54, 0.5)'
+    },
+    light: {
+      name: 'Alucard',
+      bg: '#FFFBEB',
+      fg: '#1F1F1F',
+      accent: '#A3144D',
+      border: '#CFCFDE',
+      subtle: '#6C664B',
+      shadow: 'rgba(255, 251, 235, 0.5)'
+    }
+  },
+
   // Initialize color system
   init() {
     const savedTheme = localStorage.getItem('notekeeper-theme') || 'default';
@@ -120,6 +142,11 @@ const colorManager = {
       const currentVariant = localStorage.getItem('solarized-variant') || 'light';
       theme = this.solarized[currentVariant];
       isDarkMode = currentVariant === 'dark';
+    } else if (themeName === 'dracula') {
+      // Use Dracula behavior
+      const currentVariant = localStorage.getItem('dracula-variant') || 'dark';
+      theme = this.dracula[currentVariant];
+      isDarkMode = currentVariant === 'dark';
     } else {
       // Direct theme selection
       if (themeName.startsWith('catppuccin-')) {
@@ -130,11 +157,15 @@ const colorManager = {
         const nordVariant = themeName.replace('nord-', '');
         theme = this.nord[nordVariant];
         isDarkMode = nordVariant === 'dark';
-      } else if (themeName.startsWith('solarized-')) {
-        const solarizedVariant = themeName.replace('solarized-', '');
-        theme = this.solarized[solarizedVariant];
-        isDarkMode = solarizedVariant === 'dark';
-      } else {
+        } else if (themeName.startsWith('solarized-')) {
+          const solarizedVariant = themeName.replace('solarized-', '');
+          theme = this.solarized[solarizedVariant];
+          isDarkMode = solarizedVariant === 'dark';
+        } else if (themeName.startsWith('dracula-')) {
+          const draculaVariant = themeName.replace('dracula-', '');
+          theme = this.dracula[draculaVariant];
+          isDarkMode = draculaVariant === 'dark';
+        } else {
         theme = this.defaults[themeName];
         isDarkMode = themeName === 'dark';
       }
@@ -191,6 +222,12 @@ const colorManager = {
       const nextVariant = currentVariant === 'light' ? 'dark' : 'light';
       localStorage.setItem('solarized-variant', nextVariant);
       this.applyTheme('solarized');
+    } else if (currentTheme === 'dracula') {
+      // Toggle light/dark in dracula mode
+      const currentVariant = localStorage.getItem('dracula-variant') || 'dark';
+      const nextVariant = currentVariant === 'light' ? 'dark' : 'light';
+      localStorage.setItem('dracula-variant', nextVariant);
+      this.applyTheme('dracula');
     } else {
       // Direct theme selection - toggle between default themes
       const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
@@ -214,6 +251,9 @@ const colorManager = {
     } else if (currentTheme === 'solarized') {
       const currentVariant = localStorage.getItem('solarized-variant') || 'light';
       return currentVariant === 'light' ? 'dark' : 'light';
+    } else if (currentTheme === 'dracula') {
+      const currentVariant = localStorage.getItem('dracula-variant') || 'dark';
+      return currentVariant === 'light' ? 'dark' : 'light';
     }
     return currentTheme === 'light' ? 'dark' : 'light';
   },
@@ -224,7 +264,7 @@ const colorManager = {
   }
 };
 
-// Initialize theme selector dropdown value
+  // Initialize theme selector dropdown value
 const initThemeSelector = () => {
   const currentTheme = colorManager.getCurrentTheme();
   const themeSelector = document.getElementById('theme-selector');
@@ -242,6 +282,9 @@ document.addEventListener('DOMContentLoaded', () => {
   if (!localStorage.getItem('solarized-variant')) {
     localStorage.setItem('solarized-variant', 'light');
   }
+  if (!localStorage.getItem('dracula-variant')) {
+    localStorage.setItem('dracula-variant', 'dark');
+  }
 
   colorManager.init();
   initThemeSelector();
diff --git a/shared/preload.js b/shared/preload.js
index e1efa6e..a9913ee 100644
--- a/shared/preload.js
+++ b/shared/preload.js
@@ -17,9 +17,13 @@ if (savedTheme === 'default') {
   const nordVariant = localStorage.getItem("nord-variant") || "light";
   actualTheme = nordVariant === "dark" ? "dark" : "light";
 } else if (savedTheme === 'solarized') {
-  // For solarized theme, check the variant storage
+  // For solarized theme, check variant storage
   const solarizedVariant = localStorage.getItem("solarized-variant") || "light";
   actualTheme = solarizedVariant === "dark" ? "dark" : "light";
+} else if (savedTheme === 'dracula') {
+  // For dracula theme, check variant storage
+  const draculaVariant = localStorage.getItem("dracula-variant") || "dark";
+  actualTheme = draculaVariant === "dark" ? "dark" : "light";
 }
 
 document.documentElement.setAttribute("data-theme", actualTheme || (sysTheme ? "dark" : "light"));