vrr/joplock
2
0
Fork 0
mirror of https://github.com/abort-retry-ignore/joplock.git synced 2026-10-19 10:13:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Grey theme: darker list (#0d0d0d), lighter editor (#222222). Bump SW cache v46.
Some checks failed
Build and push Joplock image / build-and-push (push) Has been cancelled
Details

Browse source
This commit is contained in:
igor 2026-07-08 16:43:25 +12:00
parent 08e42d5227
commit 44a71039d7
3 changed files with 31 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
AGENT_GUIDE.md
View file

@ -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 `<body>` that sets a shared set of CSS custom properties.
**Files to touch:**
1. **`public/styles.css`** — Add/edit a `.theme-<slug>` 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 `[<slug>, <displayName>]` 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: '<slug>' }).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`:

2
public/service-worker.js
View file

@ -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 => {

14
public/styles.css
View file

@ -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;
}