From fe437f882228b58bf16c2994470f80a2dbc134de Mon Sep 17 00:00:00 2001 From: sophie Date: Mon, 31 Aug 2026 10:42:13 +0200 Subject: git commit --- theme.js | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 theme.js (limited to 'theme.js') 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 . + */ + +(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 = ` + + + `; + 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); + }); + }); +})(); -- cgit v1.2.3