1 files changed, 93 insertions, 0 deletions
diff --git a/theme.js b/theme.js
new file mode 100644
index 0000000..1a3a574
--- /dev/null
+++ b/theme.js
@@ -0,0 +1,93 @@
+/*
+ * sophies.rocks
+ *
+ * Copyright (C) 2026 Zofia Szweda
+ *
+ * This file is part of sophies.rocks.
+ *
+ * sophies.rocks is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * sophies.rocks is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with sophies.rocks. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+(function () {
+  const THEMES = ['style', 'style-lightluster', 'style-tsoding', 'style-ashen'];
+  const DEFAULT_THEME = 'style';
+  const STORAGE_KEY = 'theme';
+
+  const saved = localStorage.getItem(STORAGE_KEY);
+  const theme = THEMES.includes(saved) ? saved : DEFAULT_THEME;
+
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.id = 'theme-link';
+  link.href = `${theme}.css`;
+  document.head.appendChild(link);
+  const style = document.createElement('style');
+  style.textContent = `
+    #menu-toggle {
+      position: fixed;
+      top: 1rem;
+      left: 1rem;
+      z-index: 100;
+      font-size: 1.3rem;
+      background: none;
+      border: none;
+      cursor: pointer;
+    }
+    #menu-panel {
+      position: fixed;
+      top: 3rem;
+      left: 1rem;
+      z-index: 100;
+      background: var(--bg, #fff);
+      border: 1px solid var(--border, #ccc);
+      padding: 0.75rem;
+      border-radius: 4px;
+    }
+    #menu-panel[hidden] { display: none; }
+  `;
+  document.head.appendChild(style);
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById('menu-toggle');
+    if (!toggle) return; // page doesn't have the button, skip menu setup
+
+    const panel = document.createElement('div');
+    panel.id = 'menu-panel';
+    panel.hidden = true;
+    panel.innerHTML = `
+      <label for="theme-picker">theme:</label>
+      <select id="theme-picker">
+        <option value="style">default</option>
+        <option value="style-lightluster">lightluster</option>
+        <option value="style-tsoding">tsoding</option>
+        <option value="style-ashen">ashen</option>
+      </select>
+    `;
+    toggle.insertAdjacentElement('afterend', panel);
+
+    toggle.addEventListener('click', () => {
+      const isHidden = panel.hidden;
+      panel.hidden = !isHidden;
+      toggle.setAttribute('aria-expanded', String(isHidden));
+    });
+
+    const picker = document.getElementById('theme-picker');
+    picker.value = theme;
+    picker.addEventListener('change', () => {
+      const chosen = picker.value;
+      document.getElementById('theme-link').href = `${chosen}.css`;
+      localStorage.setItem(STORAGE_KEY, chosen);
+    });
+  });
+})();