From 44a71039d706726c615d84fc94f4836a564bca41 Mon Sep 17 00:00:00 2001 From: igor Date: Wed, 8 Jul 2026 16:43:25 +1200 Subject: [PATCH] Grey theme: darker list (#0d0d0d), lighter editor (#222222). Bump SW cache v46. --- AGENT_GUIDE.md | 23 +++++++++++++++++++++++ public/service-worker.js | 2 +- public/styles.css | 14 +++++++------- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/AGENT_GUIDE.md b/AGENT_GUIDE.md index 7cff746..be1c551 100644 --- a/AGENT_GUIDE.md +++ b/AGENT_GUIDE.md @@ -418,6 +418,29 @@ These screens are shown/hidden by inline JS in `layoutPage()` using class change 4. If needed, inject the normalized setting into `layoutPage()` / `public/app.js` 5. Rebuild with `./scripts/rebuild-dev.sh` +### Adding or editing a theme + +Themes are CSS-only. Each theme is a class on `` that sets a shared set of CSS custom properties. + +**Files to touch:** + +1. **`public/styles.css`** — Add/edit a `.theme-` block that defines the same set of custom properties used by every other theme. + - Minimum properties that must be defined: `--bg`, `--theme-color`, `--bg-side`, `--bg-list`, `--bg-editor`, `--bg-hover`, `--bg-active`, `--text`, `--text-dim`, `--text-muted`, `--text-heading`, `--accent`, `--border`, `--border-focus`, `--danger`, `--toolbar-bg`, `--scrollbar`, `--statusbar-bg`, and `color-scheme` (`light` or `dark`). + - Keep numbers and hover/active states neutral unless the theme intentionally uses color. + - The markdown toolbar and the TinyMCE toolbar both share `color-mix(in srgb, var(--accent) 10%, var(--bg))`. Setting a sensible `--accent` and `--bg` is enough; no extra toolbar work needed. + +2. **`app/settingsService.js`** — Add the theme slug to the `validThemes` array at the top of the file. + +3. **`app/templates/shared.js`** — Add `[, ]` to `themeOptions` so it appears in the status bar picker and the settings page. + +4. **`tests/settingsService.test.js`** — Add an assertion that `normalizeSettings({ theme: '' }).theme` is preserved and not normalized back to the default. + +5. **`public/service-worker.js`** — Bump `CACHE_NAME` (e.g., `joplock-shell-vN-...`) whenever theme CSS changes. The PWA can cache old `styles.css` aggressively, and the cache-name change forces browsers to fetch the new stylesheet. + +6. Rebuild with `./scripts/rebuild-dev.sh`. + +No changes are needed in `pages.js`, `app.js`, or `settings.js`: those all read `themeOptions` or apply `theme-${settings.theme}` dynamically. + ## Route Notes Useful route groups in `app/createServer.js`: diff --git a/public/service-worker.js b/public/service-worker.js index 2b25dee..024308e 100644 --- a/public/service-worker.js +++ b/public/service-worker.js @@ -1,4 +1,4 @@ -const CACHE_NAME = 'joplock-shell-v43-20260708imglightbox'; +const CACHE_NAME = 'joplock-shell-v46-20260708greytheme3'; const STATIC_ASSETS = ['/styles.css', '/htmx.min.js', '/turndown.min.js', '/codemirror.min.js', '/hljs.min.js', '/manifest.webmanifest', '/icon.svg', '/icon-192.png', '/icon-512.png', '/maskable-icon-192.png', '/maskable-icon-512.png', '/apple-touch-icon.png', '/fonts/CascadiaMono-Regular.woff2', '/fonts/CascadiaMono-Bold.woff2']; self.addEventListener('install', event => { diff --git a/public/styles.css b/public/styles.css index 71b7884..b2273fd 100644 --- a/public/styles.css +++ b/public/styles.css @@ -184,11 +184,11 @@ /* ===== Theme: Grey ===== */ .theme-grey { - --bg: #1e1e1e; - --theme-color: #252525; - --bg-side: #252525; - --bg-list: #1e1e1e; - --bg-editor: #1e1e1e; + --bg: #222222; + --theme-color: #0d0d0d; + --bg-side: #0d0d0d; + --bg-list: #0d0d0d; + --bg-editor: #222222; --bg-elevated: rgba(255,255,255,0.05); --bg-input: rgba(255,255,255,0.06); --bg-hover: rgba(255,255,255,0.08); @@ -204,9 +204,9 @@ --border: rgba(255,255,255,0.10); --border-focus: rgba(255,255,255,0.30); --danger: #ef5350; - --toolbar-bg: #252525; + --toolbar-bg: #222222; --scrollbar: rgba(255,255,255,0.12); - --statusbar-bg: #1a1a1a; + --statusbar-bg: #0d0d0d; color-scheme: dark; }