ReCloudStudio/WebHooker
1
0
Fork 0
mirror of https://github.com/ReCloudStudio/WebHooker.git synced 2026-09-22 16:11:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): auto dark mode for admin console

Browse source 
Add a prefers-color-scheme dark palette to the Nuxt console so it
follows the device/OS theme automatically. Tokenize the previously
hardcoded dot-grid, sticky header, switch knob and overlay scrim so
they invert correctly, and set color-scheme: dark for native controls.
This commit is contained in:
RhenCloud 2026-08-02 07:51:46 +08:00
parent c3e22de4e6
commit 83794c251f
No known key found for this signature in database
GPG key ID: A574A617378C4E0B
1 changed files with 37 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

41
admin/assets/css/main.css
View file

@ -16,12 +16,45 @@
--ok-dim: #ecfdf3; --ok-dim: #ecfdf3;
--bad: #dc2626; --bad: #dc2626;
--bad-dim: #fef2f2; --bad-dim: #fef2f2;
--dot: rgba(15, 23, 42, 0.05);
--header-bg: rgba(255, 255, 255, 0.82);
--scrim: rgba(15, 23, 42, 0.4);
--knob: #ffffff;
--shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--radius: 12px; --radius: 12px;
--radius-sm: 8px; --radius-sm: 8px;
} }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0b0f17;
--surface: #131a24;
--surface-2: #1a2230;
--surface-3: #232d3d;
--border: #273143;
--border-strong: #384660;
--text: #e6e9ef;
--muted: #9aa6b8;
--faint: #6b7789;
--accent: #6366f1;
--accent-strong: #818cf8;
--accent-dim: #1c2140;
--accent-text: #c7d2fe;
--ok: #22c55e;
--ok-dim: #10241a;
--bad: #f05252;
--bad-dim: #2a1618;
--dot: rgba(148, 163, 184, 0.08);
--header-bg: rgba(15, 20, 28, 0.82);
--scrim: rgba(2, 6, 12, 0.6);
--knob: #dfe4ee;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
color-scheme: dark;
}
}
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
@ -47,7 +80,7 @@ body::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px); background-image: radial-gradient(var(--dot) 1px, transparent 1px);
background-size: 22px 22px; background-size: 22px 22px;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
@ -69,7 +102,7 @@ header {
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
padding: 14px 32px; padding: 14px 32px;
background: rgba(255, 255, 255, 0.82); background: var(--header-bg);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
@ -369,7 +402,7 @@ main {
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background: #fff; background: var(--knob);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
transition: transform 0.18s; transition: transform 0.18s;
} }
@ -495,7 +528,7 @@ main {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 40; z-index: 40;
background: rgba(15, 23, 42, 0.4); background: var(--scrim);
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
} }