schmeeve/snotes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding new themes

Browse Source
This commit is contained in:
schmeeve
2026-09-23 12:04:15 -07:00
parent 86f37e1540
commit 16c033e574
2 changed files with 89 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
static/app.js
View File

@@ -20,6 +20,15 @@ const THEMES = [
{ id: "catppuccin", label: "Catppuccin", dark: true, dots: ["#1e1e2e", "#26263a", "#cba6f7"] },
{ id: "one-dark", label: "One Dark", dark: true, dots: ["#21252b", "#282c34", "#61afef"] },
{ id: "sunset", label: "Sunset", dark: true, dots: ["#1c1018", "#251420", "#f472b6"] },
{ id: "urban-slate", label: "Urban Slate", dark: false, dots: ["#eef0f3", "#ffffff", "#4a6a8a"] },
{ id: "frozen-mist", label: "Frozen Mist", dark: false, dots: ["#eef0f2", "#fcfcfd", "#c96f3a"] },
{ id: "yacht", label: "Yacht", dark: false, dots: ["#e9edf2", "#ffffff", "#33517a"] },
{ id: "copper", label: "Copper", dark: false, dots: ["#f3ede6", "#fdfaf5", "#b5653b"] },
{ id: "marina", label: "Marina", dark: false, dots: ["#eaf0f4", "#ffffff", "#1f4e6e"] },
{ id: "neptune", label: "Neptune", dark: false, dots: ["#e7f1f4", "#ffffff", "#2f7fa0"] },
{ id: "sapphire", label: "Sapphire", dark: false, dots: ["#eef0f6", "#ffffff", "#5a73a6"] },
{ id: "tropical", label: "Tropical", dark: false, dots: ["#f2efe6", "#fdfaf2", "#e76f51"] },
{ id: "gossamer", label: "Gossamer", dark: false, dots: ["#eceef1", "#ffffff", "#3aa6a0"] },
];
const THEME_CONFIG_KEY = "snotes-theme-config";
const themeMQ = window.matchMedia("(prefers-color-scheme: dark)");
@@ -43,28 +52,30 @@ function activeThemeId() {
return themeConfig.mode === "auto" ? (themeMQ.matches ? themeConfig.dark : themeConfig.light) : themeConfig.manual;
}
function applyTheme() {
function applyTheme(labelEl, swatchEl) {
const id = activeThemeId();
document.documentElement.setAttribute("data-theme", id);
const t = findTheme(id);
const label = document.querySelector(".theme-label");
const swatch = document.querySelector(".theme-btn .theme-swatch");
const label = labelEl || document.querySelector(".theme-label");
const swatch = swatchEl || document.querySelector(".theme-btn .theme-swatch");
if (label) label.textContent = t ? t.label : "";
if (swatch && t) swatch.innerHTML = t.dots.map((c) => `<span class="theme-dot" style="background:${c}"></span>`).join("");
}
function themeSelector() {
const sel = el("div", { class: "theme-selector" });
const swatchEl = el("span", { class: "theme-swatch" });
const labelEl = el("span", { class: "theme-label" });
const btn = el("button", { class: "theme-btn", title: "Change theme" }, [
el("span", { class: "theme-swatch" }),
el("span", { class: "theme-label" }),
swatchEl,
labelEl,
el("span", { class: "chevron", html: "&#9662;" }),
]);
const pop = el("div", { class: "theme-popover hidden" });
sel.appendChild(btn); sel.appendChild(pop);
function render() {
applyTheme();
applyTheme(labelEl, swatchEl);
pop.innerHTML = `
<div class="theme-pop-header">Themes</div>
<div class="mode-row">