vscode-extensions/archify-vscode-ext
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Model graph: dark/light theme toggle on the page

Browse Source 
- sun/moon button next to Export; the choice is remembered in the page state and written to the archify-theme key the diagram pages use
- explicit dark and light token sets; without a choice the page follows VS Code's theme as before
- Cytoscape restyles from the page tokens whenever the theme changes
This commit is contained in:
root-at-skic
2026-10-21 21:33:38 +03:00
parent 99ea076571
commit 3ed2d7eed8
4 changed files with 76 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/graph/style.ts
+4
View File
@@ -5,7 +5,11 @@ export const GRAPH_PAGE_STYLE = `
--ag-input: var(--vscode-input-background, #1f2937); --ag-input-fg: var(--vscode-input-foreground, #e5e7eb); --ag-input-border: var(--vscode-input-border, var(--ag-border));
--ag-error: var(--vscode-errorForeground, #f87171); --ag-font: var(--vscode-font-family, system-ui, sans-serif); --ag-mono: var(--vscode-editor-font-family, ui-monospace, Menlo, monospace);
--ag-frontend: #22d3ee; --ag-backend: #34d399; --ag-database: #a78bfa; --ag-cloud: #fbbf24; --ag-security: #fb7185; --ag-messagebus: #fb923c; --ag-external: #94a3b8; --ag-decision: #e879f9; --ag-registry: #cbd5e1; }
/* A theme chosen on the page overrides VS Code's; without one the VS Code variables above apply. */
:root[data-theme="dark"] { --ag-bg: #0b1020; --ag-fg: #e5e7eb; --ag-muted: #9ca3af; --ag-panel: #111a2e; --ag-border: rgba(148, 163, 184, 0.28); --ag-accent: #22d3ee; --ag-input: #0f172a; --ag-input-fg: #e5e7eb; --ag-input-border: rgba(148, 163, 184, 0.28); --ag-error: #f87171; color-scheme: dark; }
:root[data-theme="light"] { --ag-bg: #ffffff; --ag-fg: #0f172a; --ag-muted: #64748b; --ag-panel: #f8fafc; --ag-border: rgba(15, 23, 42, 0.14); --ag-accent: #0e7490; --ag-input: #ffffff; --ag-input-fg: #0f172a; --ag-input-border: rgba(15, 23, 42, 0.2); --ag-error: #b91c1c; --ag-external: #64748b; --ag-registry: #94a3b8; color-scheme: light; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ag-bg); color: var(--ag-fg); font-family: var(--ag-font); font-size: 13px; }
.ag-theme { width: 1.9rem; padding: 0; font-size: 0.95rem; line-height: 1; }
.ag { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; }
.ag-top { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--ag-border); }
.ag-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ag-accent); }