poslop/palette
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Theme pairs with dark mode toggle, gear active state, PALETTE_DEFAULT_DARK (#127)
CI / test (pull_request) Successful in 25s
Details
CI / docker (pull_request) Skipped
Details

Browse Source 
- Collapse the 10 theme cards into 5 pairs: light swatches top row, dark bottom row
- Dark mode toggle in settings and topbar (sun/moon inline SVG)
- Toggling dark mode switches to the other variant of the selected pair
- Persist pair id in localStorage palette-theme, dark flag in palette-dark
- Head script resolves base+dark to variant; URL ?theme= accepts both ids and wins
- Settings gear highlights like nav tabs on /settings
- PALETTE_DEFAULT_DARK env var sets server default dark state (default on)
- Server-side resolution helpers + tests
This commit is contained in:
fen
2026-09-09 22:17:50 -05:00
parent 7ed50087a6
commit dcf2d66a82
7 changed files with 294 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+64
View File
@@ -203,6 +203,22 @@ body {
.iconbtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: var(--radius); padding: 5px 12px; font: inherit; font-size: 21.6px; cursor: pointer; text-decoration: none; }
.iconbtn.gear { display: inline-flex; align-items: center; padding: 5px 9px; }
.iconbtn.gear svg { width: 22px; height: 22px; }
/* #127: gear highlights like selected nav tabs; dark toggle button */
.iconbtn.gear.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.iconbtn.dark-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; }
.iconbtn.dark-toggle svg { width: 22px; height: 22px; }
.iconbtn.dark-toggle .icon-moon { display: none; }
.iconbtn.dark-toggle .icon-sun { display: inline-block; }
.dark .iconbtn.dark-toggle .icon-sun { display: none; }
.dark .iconbtn.dark-toggle .icon-moon { display: inline-block; }
/* #127: gear highlights like selected nav tabs; dark toggle button */
.iconbtn.gear.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.iconbtn.dark-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; }
.iconbtn.dark-toggle svg { width: 22px; height: 22px; }
.iconbtn.dark-toggle .icon-moon { display: none; }
.iconbtn.dark-toggle .icon-sun { display: inline-block; }
.dark .iconbtn.dark-toggle .icon-sun { display: none; }
.dark .iconbtn.dark-toggle .icon-moon { display: inline-block; }
.settings-head { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.settings-head h1 { font-size: 29.2px; font-weight: 600; margin: 0; }
.settings-body { padding: 16px 18px; color: var(--muted-fg); font-size: 21.6px; }
@@ -480,6 +496,12 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
.topbar nav a { padding: 5px 8px; font-size: 15px; }
.iconbtn.gear { padding: 4px 7px; flex-shrink: 0; }
.iconbtn.gear svg { width: 18px; height: 18px; }
.iconbtn.dark-toggle { padding: 4px 7px; flex-shrink: 0; }
.iconbtn.dark-toggle svg { width: 18px; height: 18px; }
.iconbtn.dark-toggle span { display: none; }
.iconbtn.dark-toggle { padding: 4px 7px; flex-shrink: 0; }
.iconbtn.dark-toggle svg { width: 18px; height: 18px; }
.iconbtn.dark-toggle span { display: none; }
/* new paste: stack editor above sidebar, natural page height */
.deck {
@@ -627,3 +649,45 @@ button[type="submit"]:focus-visible,
padding-top: 20px;
border-top: 1px solid var(--border);
}
/* #38: attachment upload on /new + attachment display on paste view */
.side-section .file-input { display: none; }
.dropzone {
border: 1px dashed var(--border);
border-radius: var(--radius-lg);
padding: 14px 12px;
text-align: center;
color: var(--muted-fg);
cursor: pointer;
font-size: 20.7px;
transition: border-color .15s, background .15s;
background: var(--surface-2, transparent);
}
.dropzone:hover, .dropzone.dragover {
border-color: var(--accent);
background: var(--surface-2);
}
.dropzone.dragover { border-width: 2px; }
.file-chip {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--border); border-radius: var(--radius);
padding: 8px 14px; margin-top: 8px; background: var(--surface);
font-size: 21.6px;
}
.file-chip .file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.file-chip .file-chip-size { color: var(--muted-fg); font-size: 19px; }
.file-chip .file-chip-remove {
border: none; background: none; color: var(--muted-fg); cursor: pointer;
font-size: 22px; padding: 0 4px; border-radius: var(--radius-sm);
}
.file-chip .file-chip-remove:hover { color: var(--danger, #c0392b); }
.attachment-bar { display: flex; flex-direction: column; gap: 10px; }
.attachment-chip {
display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
border: 1px solid var(--border); border-radius: var(--radius);
padding: 8px 16px; text-decoration: none; color: var(--fg);
background: var(--surface-2); font-size: 21.6px;
}
.attachment-chip:hover { border-color: var(--accent); }
.attachment-chip .attachment-size { color: var(--muted-fg); font-size: 19px; }
.attachment-preview img { max-width: 480px; max-height: 360px; border-radius: var(--radius); border: 1px solid var(--border); }