~gitpocket/gitpocket

1

style(settings): pick the theme from a dropdown

commit
ece10ec87b759061dbb6158366d0cd96f0662987 browse tree
parent
8fb214d48b8f62e01985d15a40d62863b8c82985
author
obscurejames <354576047+obscurejames@users.noreply.github.com>
signature
Verified ~james signed with a key registered by ~james
date
2026-11-04 22:40 UTC

2 files changed, +9 −6

static/style.css modified

@@ -220,7 +220,7 @@ nav.filters a.active{color:var(--fg);font-weight:600}
220220 .comment .readme p{margin:.3rem 0}
221221 .btn.block+form{margin-top:.4rem}
222222 .btn:disabled{opacity:.5;cursor:default}
223-select{font:inherit;padding:.35rem .5rem;border:1px solid var(--edge);background:var(--bg)}
223+select{font:inherit;color:var(--fg);padding:.35rem .5rem;border:1px solid var(--edge);background:var(--bg)}
224224 .mergeform{max-width:none;margin:.4rem 0 .8rem}
225225 .mergeform input,.mergeform textarea{width:100%}
226226 .mergeform .actions{gap:.4rem}
@@ -474,6 +474,6 @@ nav.site .me form{margin:0}
474474 .branchpick>div a:hover{background:var(--soft);text-decoration:none}
475475 .branchpick>div a.current{font-weight:600;color:var(--link)}
476476 label.radio input{width:auto;margin:0}
477-:root[data-theme=dark]{--accent:#5b5fa8;--accentdark:#4a4d91;--accentsoft:#24263d;--focus:#4a4d91;--link:#a3a7ee;--heat0:#262626;--heat1:#2f3262;--heat2:#454991;--heat3:#666bc4;--heat4:#9ca0f0;--fg:#f4f4f4;--muted:#a8a8a8;--line:#393939;--soft:#1f1f1f;--bar:#393939;--add:#42be65;--del:#fa4d56;--addbg:#0e2a17;--delbg:#3a1518;--code:#1f1f1f;--bg:#161616;--raised:#262626;--raisedhover:#333;--edge:#525252;--hl:#3d3412;--warnbg:#2d2510;--warnedge:#5c4b10;--warnfg:#f1c21b;--merged:#a56eff;--dotedge:rgba(255,255,255,.15);--tip:#f4f4f4;--tipfg:#161616;color-scheme:dark}
477+:root[data-theme=dark]{--accent:#5b5fa8;--accentdark:#4a4d91;--accentsoft:#2c2e48;--focus:#4a4d91;--link:#a3a7ee;--heat0:#2f3034;--heat1:#2f3262;--heat2:#454991;--heat3:#666bc4;--heat4:#9ca0f0;--fg:#f4f4f4;--muted:#a8a8a8;--line:#3e3f45;--soft:#28292d;--bar:#303136;--add:#42be65;--del:#fa4d56;--addbg:#0e2a17;--delbg:#3a1518;--code:#28292d;--bg:#212225;--raised:#2e2f34;--raisedhover:#393a40;--edge:#57585f;--hl:#3d3412;--warnbg:#2d2510;--warnedge:#5c4b10;--warnfg:#f1c21b;--merged:#a56eff;--dotedge:rgba(255,255,255,.15);--tip:#f4f4f4;--tipfg:#212225;color-scheme:dark}
478478 :root[data-theme=dark] nav.site .brand img{filter:brightness(2.2) saturate(.9)}
479-@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--accent:#5b5fa8;--accentdark:#4a4d91;--accentsoft:#24263d;--focus:#4a4d91;--link:#a3a7ee;--heat0:#262626;--heat1:#2f3262;--heat2:#454991;--heat3:#666bc4;--heat4:#9ca0f0;--fg:#f4f4f4;--muted:#a8a8a8;--line:#393939;--soft:#1f1f1f;--bar:#393939;--add:#42be65;--del:#fa4d56;--addbg:#0e2a17;--delbg:#3a1518;--code:#1f1f1f;--bg:#161616;--raised:#262626;--raisedhover:#333;--edge:#525252;--hl:#3d3412;--warnbg:#2d2510;--warnedge:#5c4b10;--warnfg:#f1c21b;--merged:#a56eff;--dotedge:rgba(255,255,255,.15);--tip:#f4f4f4;--tipfg:#161616;color-scheme:dark}:root:not([data-theme=light]) nav.site .brand img{filter:brightness(2.2) saturate(.9)}}
479+@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--accent:#5b5fa8;--accentdark:#4a4d91;--accentsoft:#2c2e48;--focus:#4a4d91;--link:#a3a7ee;--heat0:#2f3034;--heat1:#2f3262;--heat2:#454991;--heat3:#666bc4;--heat4:#9ca0f0;--fg:#f4f4f4;--muted:#a8a8a8;--line:#3e3f45;--soft:#28292d;--bar:#303136;--add:#42be65;--del:#fa4d56;--addbg:#0e2a17;--delbg:#3a1518;--code:#28292d;--bg:#212225;--raised:#2e2f34;--raisedhover:#393a40;--edge:#57585f;--hl:#3d3412;--warnbg:#2d2510;--warnedge:#5c4b10;--warnfg:#f1c21b;--merged:#a56eff;--dotedge:rgba(255,255,255,.15);--tip:#f4f4f4;--tipfg:#212225;color-scheme:dark}:root:not([data-theme=light]) nav.site .brand img{filter:brightness(2.2) saturate(.9)}}

templates/appearance.html modified

@@ -1,9 +1,12 @@
11 {{define "content"}}
22 <div class="panel"><h3>Theme</h3>
33 <form method="post" action="/settings/appearance" class="stack">
4-<label class="radio"><input type="radio" name="theme" value=""{{if eq .Theme ""}} checked{{end}}> System <small>Follow the light or dark setting of your device</small></label>
5-<label class="radio"><input type="radio" name="theme" value="light"{{if eq .Theme "light"}} checked{{end}}> Light</label>
6-<label class="radio"><input type="radio" name="theme" value="dark"{{if eq .Theme "dark"}} checked{{end}}> Dark</label>
4+<label>Theme <select name="theme">
5+<option value=""{{if eq .Theme ""}} selected{{end}}>System</option>
6+<option value="light"{{if eq .Theme "light"}} selected{{end}}>Light</option>
7+<option value="dark"{{if eq .Theme "dark"}} selected{{end}}>Dark</option>
8+</select></label>
9+<small>System follows the light or dark setting of your device.</small>
710 <div class="actions left"><button class="btn primary">Save ▸</button></div>
811 </form></div>
912 {{end}}