collin/anvil · 1008e108
Add system light/dark mode detection with cohesive dark theme
Collin Richards · 2026-08-18 00:44 UTC · 1008e108c5ea985d8e0ccb25e28a6c12b449b4c0 · parent 583f0af5 · browse files
modifiedcrates/anvil-web/src/ui.rs+21 −15
| ⋯ 90 unchanged lines | |||
| 91 | 91 | }; | |
| 92 | 92 | ||
| 93 | 93 | const STYLE: &str = r#" | |
| 94 | - | :root { --fg:#1f2328; --muted:#656d76; --bg:#fff; --border:#d0d7de; --accent:#0969da; --code-bg:#f6f8fa; } | |
| 94 | + | :root { --fg:#1f2328; --muted:#656d76; --bg:#fff; --border:#d0d7de; --accent:#0969da; --code-bg:#f6f8fa; --success:#1a7f37; --success-bg:#dafbe1; --error:#cf222e; --error-bg:#ffebe9; --warning:#7d4e00; --warning-bg:#fff8c5; --info:#8250df; --info-bg:#fbefff; --dir-icon:#54aeff; --diff-ins-bg:#e6ffec; --diff-del-bg:#ffebe9; } | |
| 95 | + | @media (prefers-color-scheme: dark) { | |
| 96 | + | :root { --fg:#e6edf3; --muted:#8b949e; --bg:#0d1117; --border:#30363d; --accent:#58a6ff; --code-bg:#161b22; --success:#3fb950; --success-bg:#1a3a1a; --error:#f85149; --error-bg:#3d1f1a; --warning:#d29922; --warning-bg:#3a2a1a; --info:#a371f7; --info-bg:#2a1e4e; --dir-icon:#79c0ff; --diff-ins-bg:#0d2818; --diff-del-bg:#2d1519; } | |
| 97 | + | } | |
| 95 | 98 | * { box-sizing:border-box; } | |
| 96 | 99 | body { margin:0; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; color:var(--fg); background:var(--bg); } | |
| 97 | 100 | a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } | |
| ⋯ 15 unchanged lines | |||
| 113 | 116 | .box .row a.fc-msg:hover { color:var(--accent); } | |
| 114 | 117 | .box .row .fc-time { margin-left:16px; white-space:nowrap; color:var(--muted); font-size:13px; } | |
| 115 | 118 | .icon { width:1em; height:1em; flex:none; fill:currentColor; color:var(--muted); vertical-align:-0.125em; } | |
| 116 | - | .icon.dir { color:#54aeff; } | |
| 119 | + | .icon.dir { color:var(--dir-icon); } | |
| 117 | 120 | .file-actions .btn .icon { color:inherit; } | |
| 118 | 121 | table.code { border-collapse:collapse; width:100%; font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } | |
| 119 | 122 | table.code td { padding:0 10px; vertical-align:top; white-space:pre; } | |
| ⋯ 11 unchanged lines | |||
| 131 | 134 | .clone-cmd code { flex:1; font:12px ui-monospace,monospace; user-select:all; overflow-x:auto; white-space:nowrap; } | |
| 132 | 135 | .copy-btn { display:inline-flex; align-items:center; background:none; border:0; color:var(--muted); cursor:pointer; padding:2px; } | |
| 133 | 136 | .copy-btn:hover { color:var(--fg); } | |
| 134 | - | .copied-msg { display:none; color:#1a7f37; font-size:12px; } | |
| 137 | + | .copied-msg { display:none; color:var(--success); font-size:12px; } | |
| 135 | 138 | .clone.copied .copied-msg { display:inline; } | |
| 136 | - | .clone.copied .copy-btn { color:#1a7f37; } | |
| 139 | + | .clone.copied .copy-btn { color:var(--success); } | |
| 137 | 140 | .crumbs { margin:12px 0; font:13px ui-monospace,monospace; } | |
| 138 | 141 | .pill { display:inline-block; background:var(--code-bg); border:1px solid var(--border); border-radius:2em; padding:1px 8px; font-size:12px; color:var(--muted); } | |
| 139 | 142 | .pill.active { background:var(--accent); border-color:var(--accent); color:#fff; } | |
| ⋯ 39 unchanged lines | |||
| 179 | 182 | table.usage .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } | |
| 180 | 183 | table.usage tfoot td { font-weight:600; border-top:2px solid var(--border); border-bottom:none; } | |
| 181 | 184 | .issue-dot { width:10px; height:10px; border-radius:50%; flex:none; } | |
| 182 | - | .issue-dot.open { background:#1a7f37; } | |
| 183 | - | .issue-dot.closed { background:#8250df; } | |
| 184 | - | .st.issue-open { background:#dafbe1; color:#1a7f37; } | |
| 185 | - | .st.issue-closed { background:#fbefff; color:#8250df; } | |
| 185 | + | .issue-dot.open { background:var(--success); } | |
| 186 | + | .issue-dot.closed { background:var(--info); } | |
| 187 | + | .st.issue-open { background:var(--success-bg); color:var(--success); } | |
| 188 | + | .st.issue-closed { background:var(--info-bg); color:var(--info); } | |
| 186 | 189 | .issue-post { margin:12px 0; } | |
| 187 | 190 | .issue-head { padding:8px 16px; border-bottom:1px solid var(--border); background:var(--code-bg); font-size:13px; color:var(--muted); } | |
| 188 | 191 | .btn.btn-secondary { background:var(--bg); color:var(--fg); border-color:var(--border); } | |
| ⋯ 50 unchanged lines | |||
| 239 | 242 | .file-diff[open] summary.head::before { content:"\25BE"; } | |
| 240 | 243 | .file-diff[open] summary.head { border-bottom:0; border-radius:6px 6px 0 0; } | |
| 241 | 244 | .file-diff .stat { margin-left:auto; white-space:nowrap; } | |
| 242 | - | .stat .plus { color:#1a7f37; } .stat .minus { color:#cf222e; } | |
| 245 | + | .stat .plus { color:var(--success); } .stat .minus { color:var(--error); } | |
| 243 | 246 | table.diff { border:1px solid var(--border); border-radius:0 0 6px 6px; } | |
| 244 | 247 | table.diff td.sign { width:1%; text-align:center; color:var(--muted); user-select:none; } | |
| 245 | - | table.diff tr.ins { background:#e6ffec; } table.diff tr.ins td.sign { color:#1a7f37; } | |
| 246 | - | table.diff tr.del { background:#ffebe9; } table.diff tr.del td.sign { color:#cf222e; } | |
| 248 | + | table.diff tr.ins { background:var(--diff-ins-bg); } table.diff tr.ins td.sign { color:var(--success); } | |
| 249 | + | table.diff tr.del { background:var(--diff-del-bg); } table.diff tr.del td.sign { color:var(--error); } | |
| 247 | 250 | table.diff tr.gap td { background:var(--code-bg); color:var(--muted); text-align:center; padding:3px 10px; user-select:none; font-size:11px; } | |
| 248 | 251 | .badge { font-size:11px; border-radius:3px; padding:1px 6px; } | |
| 249 | - | .badge.add { background:#dafbe1; color:#1a7f37; } .badge.del { background:#ffebe9; color:#cf222e; } .badge.mod { background:#fff8c5; color:#7d4e00; } | |
| 252 | + | .badge.add { background:var(--success-bg); color:var(--success); } .badge.del { background:var(--error-bg); color:var(--error); } .badge.mod { background:var(--warning-bg); color:var(--warning); } | |
| 250 | 253 | .st { font-size:11px; border-radius:2em; padding:1px 9px; font-weight:600; text-transform:capitalize; } | |
| 251 | - | .st.queued { background:#eaeef2; color:#656d76; } .st.running { background:#fff8c5; color:#7d4e00; } | |
| 252 | - | .st.success { background:#dafbe1; color:#1a7f37; } .st.failure, .st.error { background:#ffebe9; color:#cf222e; } | |
| 253 | - | .log { background:#0d1117; color:#e6edf3; border-radius:6px; padding:14px 16px; overflow-x:auto; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; margin:0; } | |
| 254 | + | .st.queued { background:var(--code-bg); color:var(--muted); } .st.running { background:var(--warning-bg); color:var(--warning); } | |
| 255 | + | .st.success { background:var(--success-bg); color:var(--success); } .st.failure, .st.error { background:var(--error-bg); color:var(--error); } | |
| 256 | + | .log { background:var(--code-bg); color:var(--fg); border-radius:6px; padding:14px 16px; overflow-x:auto; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; margin:0; border:1px solid var(--border); } | |
| 257 | + | @media (prefers-color-scheme: dark) { | |
| 258 | + | .log { background:#0d1117; color:#e6edf3; border:0; } | |
| 259 | + | } | |
| 254 | 260 | footer { color:var(--muted); font-size:12px; padding:24px 0; border-top:1px solid var(--border); margin-top:32px; } | |
| 255 | 261 | details.nav-menu { position:relative; } | |
| 256 | 262 | details.nav-menu > summary { list-style:none; cursor:pointer; color:var(--accent); font-size:14px; } | |
| ⋯ 2495 unchanged lines | |||