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

logos, themes

Browse Source
This commit is contained in:
schmeeve
2026-09-23 12:43:10 -07:00
parent 16c033e574
commit 220991de09
7 changed files with 65 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
static/app.js
View File

@@ -9,26 +9,26 @@ marked.setOptions({ gfm: true, breaks: false });
const state = { user: null, local: true, authed: true, editor: null, noteId: null, view: "home", space: null, userNames: null };
const THEMES = [
{ id: "dark", label: "Dark", dark: true, dots: ["#1a1b1e", "#26272b", "#7dd3fc"] },
{ id: "light", label: "Light", dark: false, dots: ["#f5f7fb", "#ffffff", "#3b82f6"] },
{ id: "summer", label: "Summer", dark: false, dots: ["#fff8f0", "#fff0e0", "#f08040"] },
{ id: "max-summer", label: "Max Summer", dark: false, dots: ["#fffdf5", "#fff9e8", "#e53935"] },
{ id: "autumn", label: "Autumn", dark: false, dots: ["#f4f1ec", "#eae5de", "#d59b6a"] },
{ id: "dracula", label: "Dracula", dark: true, dots: ["#0c0c1e", "#12122a", "#7c6af7"] },
{ id: "nord", label: "Nord", dark: true, dots: ["#2e3440", "#3b4252", "#88c0d0"] },
{ id: "tokyo-night", label: "Tokyo Night", dark: true, dots: ["#1a1b26", "#1f2335", "#7aa2f7"] },
{ 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"] },
{ id: "light", label: "Light", dark: false, dots: ["#f5f7fb", "#ffffff", "#3b82f6", "#8b5cf6"] },
{ id: "summer", label: "Summer", dark: false, dots: ["#fff8f0", "#fff0e0", "#f08040", "#14b8a6"] },
{ id: "max-summer", label: "Max Summer", dark: false, dots: ["#fffdf5", "#fff9e8", "#e53935", "#f59e0b"] },
{ id: "autumn", label: "Autumn", dark: false, dots: ["#f4f1ec", "#eae5de", "#d59b6a", "#7a9e6e"] },
{ id: "urban-slate", label: "Urban Slate", dark: false, dots: ["#eef0f3", "#ffffff", "#4a6a8a", "#c68a3c"] },
{ id: "frozen-mist", label: "Frozen Mist", dark: false, dots: ["#eef0f2", "#fcfcfd", "#c96f3a", "#4a8a96"] },
{ id: "yacht", label: "Yacht", dark: false, dots: ["#e9edf2", "#ffffff", "#33517a", "#b06a3c"] },
{ id: "copper", label: "Copper", dark: false, dots: ["#f3ede6", "#fdfaf5", "#b5653b", "#3b9a9c"] },
{ id: "marina", label: "Marina", dark: false, dots: ["#eaf0f4", "#ffffff", "#1f4e6e", "#4a97a6"] },
{ id: "neptune", label: "Neptune", dark: false, dots: ["#e7f1f4", "#ffffff", "#2f7fa0", "#d98a4a"] },
{ id: "sapphire", label: "Sapphire", dark: false, dots: ["#eef0f6", "#ffffff", "#5a73a6", "#c06a52"] },
{ id: "tropical", label: "Tropical", dark: false, dots: ["#f2efe6", "#fdfaf2", "#e76f51", "#32a09c"] },
{ id: "gossamer", label: "Gossamer", dark: false, dots: ["#eceef1", "#ffffff", "#3aa6a0", "#d0783c"] },
{ id: "dark", label: "Dark", dark: true, dots: ["#1a1b1e", "#26272b", "#7dd3fc", "#f59e0b"] },
{ id: "dracula", label: "Dracula", dark: true, dots: ["#0c0c1e", "#12122a", "#7c6af7", "#ff79c6"] },
{ id: "nord", label: "Nord", dark: true, dots: ["#2e3440", "#3b4252", "#88c0d0", "#d08770"] },
{ id: "tokyo-night", label: "Tokyo Night", dark: true, dots: ["#1a1b26", "#1f2335", "#7aa2f7", "#e0af68"] },
{ id: "catppuccin", label: "Catppuccin", dark: true, dots: ["#1e1e2e", "#26263a", "#cba6f7", "#94e2d5"] },
{ id: "one-dark", label: "One Dark", dark: true, dots: ["#21252b", "#282c34", "#61afef", "#98c379"] },
{ id: "sunset", label: "Sunset", dark: true, dots: ["#1c1018", "#251420", "#f472b6", "#fb923c"] },
];
const THEME_CONFIG_KEY = "snotes-theme-config";
const themeMQ = window.matchMedia("(prefers-color-scheme: dark)");
@@ -74,6 +74,13 @@ function themeSelector() {
const pop = el("div", { class: "theme-popover hidden" });
sel.appendChild(btn); sel.appendChild(pop);
function optionHtml(t) {
return `<button type="button" class="theme-option ${themeConfig.mode === "manual" && t.id === themeConfig.manual ? "active" : ""}" data-theme="${t.id}">
<span class="theme-swatch">${t.dots.map((c) => `<span class="theme-dot" style="background:${c}"></span>`).join("")}</span>
<span>${t.label}</span>
</button>`;
}
function render() {
applyTheme(labelEl, swatchEl);
pop.innerHTML = `
@@ -89,10 +96,8 @@ function themeSelector() {
<select data-role="dark">${THEMES.filter((t) => t.dark).map((t) => `<option value="${t.id}" ${t.id === themeConfig.dark ? "selected" : ""}>${t.label}</option>`).join("")}</select>
</div>
<div class="theme-grid ${themeConfig.mode === "manual" ? "" : "hidden"}">
${THEMES.map((t) => `<button type="button" class="theme-option ${themeConfig.mode === "manual" && t.id === themeConfig.manual ? "active" : ""}" data-theme="${t.id}">
<span class="theme-swatch">${t.dots.map((c) => `<span class="theme-dot" style="background:${c}"></span>`).join("")}</span>
<span>${t.label}</span>
</button>`).join("")}
<div class="theme-section">Light</div>${THEMES.filter((t) => !t.dark).map(optionHtml).join("")}
<div class="theme-section">Dark</div>${THEMES.filter((t) => t.dark).map(optionHtml).join("")}
</div>`;
}
@@ -183,8 +188,7 @@ async function doLogin() {
function header() {
return el("header", { class: "topbar" }, [
el("div", { class: "brand" }, [
el("img", { src: "/static/snotes-new.png", class: "brand-logo" }),
el("span", { text: "snotes" }),
el("img", { src: "/static/snotes-logo.png", class: "brand-logo", alt: "snotes" }),
]),
el("input", { id: "search", class: "search", type: "search", placeholder: "Search notes…", oninput: debounce(onSearch, 250) }),
el("div", { class: "topbar-right" }, [