Skip to content

feat(devtools-ui): add light mode with theme toggle #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryanbas21 merged 5 commits into from
May 13, 2026
Merged

feat(devtools-ui): add light mode with theme toggle #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a91fbd9
feat(devtools-ui): add Payload tab to inspector panel
ryanbas21 May 13, 2026
0f2e094
feat(devtools-ui): add light mode with theme toggle
ryanbas21 May 13, 2026
ec02507
fix(panel): keep MutationObserver alive to survive Elm VDOM re-renders
pullfrog[bot] May 13, 2026
de5b674
fix(devtools-extension): append theme toggle at end of toolbar to avo…
ryanbas21 May 13, 2026
ffe197c
fix(devtools-ui): replace hardcoded rgba() with theme-aware CSS varia…
pullfrog[bot] May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions packages/devtools-extension/src/panel/panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,61 @@ function initResizeHandles() {
});
}

// ── Theme toggle ─────────────────────────────────────────────────────────────

const THEME_KEY = 'wolfcola:theme';

function getPreferredTheme(): 'dark' | 'light' {
const stored = localStorage.getItem(THEME_KEY);
if (stored === 'light' || stored === 'dark') return stored;
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
}

function applyTheme(theme: 'dark' | 'light') {
if (theme === 'light') {
root.setAttribute('data-theme', 'light');
} else {
root.removeAttribute('data-theme');
}
}

function initThemeToggle() {
let theme = getPreferredTheme();
applyTheme(theme);

const btn = document.createElement('button');
btn.className = 'theme-toggle';
btn.title = 'Toggle light/dark mode';
btn.ariaLabel = 'Toggle light/dark mode';
btn.textContent = theme === 'light' ? '☀' : '☾';

btn.addEventListener('click', () => {
theme = theme === 'dark' ? 'light' : 'dark';
applyTheme(theme);
localStorage.setItem(THEME_KEY, theme);
btn.textContent = theme === 'light' ? '☀' : '☾';
});

// Keep the observer alive — Elm's virtual DOM re-renders the toolbar
// on any model change and removes nodes it doesn't know about.
// IMPORTANT: always appendChild (never insertBefore) so the toggle
// lives *after* all Elm-managed children. Elm patches by index, so
// inserting in the middle shifts indices and corrupts button state.
const observer = new MutationObserver(() => {
const toolbar = document.querySelector('.toolbar');
if (toolbar && btn.parentElement !== toolbar) {
toolbar.appendChild(btn);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}

// ── App init ──────────────────────────────────────────────────────────────────

const app = Elm.Main.init({ node: document.getElementById('app'), flags: null });

initResizeHandles();
initThemeToggle();

function copyToClipboard(text: string): void {
if (navigator.clipboard?.writeText) {
Expand Down
141 changes: 106 additions & 35 deletions packages/devtools-ui/src/panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,18 @@
--muted: #8b949e;
--dim: #484f58;
--blue: #58a6ff;
--blue-rgb: 88, 166, 255;
--green: #3fb950;
--green-rgb: 63, 185, 80;
--red: #f85149;
--red-rgb: 248, 81, 73;
--orange: #ffa657;
--orange-rgb: 255, 166, 87;
--yellow: #d29922;
--yellow-rgb: 210, 153, 34;
--purple: #bc8cff;
--purple-rgb: 188, 140, 255;
--shadow-alpha: 0.3;
--font-ui: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'Cascadia Code', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

Expand All @@ -33,6 +40,32 @@
--toolbar-h: 32px;
}

[data-theme='light'] {
--base: #ffffff;
--surface: #f6f8fa;
--raised: #eaeef2;
--hover: #eef1f5;
--sel: #ddf4ff;
--border: #d0d7de;
--bdim: #e4e8ec;
--text: #1f2328;
--muted: #636c76;
--dim: #8c959f;
--blue: #0969da;
--blue-rgb: 9, 105, 218;
--green: #1a7f37;
--green-rgb: 26, 127, 55;
--red: #cf222e;
--red-rgb: 207, 34, 46;
--orange: #bc4c00;
--orange-rgb: 188, 76, 0;
--yellow: #9a6700;
--yellow-rgb: 154, 103, 0;
--purple: #8250df;
--purple-rgb: 130, 80, 223;
--shadow-alpha: 0.12;
}

html,
body {
height: 100%;
Expand Down Expand Up @@ -146,7 +179,7 @@ body {
border-color: var(--red);
}
.tb-btn.recording:hover {
background: rgba(248, 81, 73, 0.1);
background: rgba(var(--red-rgb), 0.1);
}

.rec-dot {
Expand Down Expand Up @@ -205,14 +238,41 @@ body {
color: var(--dim);
}

/* ── Theme Toggle ───────────────────────────────────────── */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--muted);
cursor: pointer;
font-size: 13px;
line-height: 1;
transition:
color 0.12s,
border-color 0.12s,
background 0.12s;
flex-shrink: 0;
}
.theme-toggle:hover {
color: var(--text);
border-color: var(--muted);
background: var(--raised);
}

/* ── Error Banner ────────────────────────────────────────── */
.err-banner {
padding: 5px 12px;
background: rgba(248, 81, 73, 0.08);
background: rgba(var(--red-rgb), 0.08);
color: var(--red);
font-family: var(--font-mono);
font-size: 11px;
border-bottom: 1px solid rgba(248, 81, 73, 0.25);
border-bottom: 1px solid rgba(var(--red-rgb), 0.25);
flex-shrink: 0;
}

Expand Down Expand Up @@ -283,19 +343,19 @@ body {
flex-shrink: 0;
}
.b-net {
background: rgba(88, 166, 255, 0.1);
background: rgba(var(--blue-rgb), 0.1);
color: var(--blue);
}
.b-sdk {
background: rgba(63, 185, 80, 0.1);
background: rgba(var(--green-rgb), 0.1);
color: var(--green);
}
.b-ses {
background: rgba(255, 166, 87, 0.1);
background: rgba(var(--orange-rgb), 0.1);
color: var(--orange);
}
.b-cfg {
background: rgba(188, 140, 255, 0.1);
background: rgba(var(--purple-rgb), 0.1);
color: var(--purple);
}

Expand Down Expand Up @@ -379,15 +439,15 @@ body {
overflow: visible;
}
.tag-cors {
background: rgba(248, 81, 73, 0.12);
background: rgba(var(--red-rgb), 0.12);
color: var(--red);
}
.tag-oidc {
background: rgba(88, 166, 255, 0.12);
background: rgba(var(--blue-rgb), 0.12);
color: var(--blue);
}
.tag-coll {
background: rgba(88, 166, 255, 0.12);
background: rgba(var(--blue-rgb), 0.12);
color: var(--blue);
}

Expand Down Expand Up @@ -522,7 +582,7 @@ body {
transition: background 0.12s;
}
.cause-btn:hover {
background: rgba(88, 166, 255, 0.1);
background: rgba(var(--blue-rgb), 0.1);
}

/* collector card */
Expand All @@ -531,7 +591,7 @@ body {
border-radius: 4px;
padding: 8px 10px;
margin-bottom: 8px;
background: rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.7));
}
.coll-card-header {
display: flex;
Expand All @@ -558,14 +618,25 @@ body {
line-height: 1;
}
.fv-copy-btn:hover {
color: var(--fg);
border-color: var(--fg);
color: var(--text);
border-color: var(--text);
}
.coll-copy-all {
font-size: 10px;
padding: 2px 8px;
}

/* ── Payload Tab ─────────────────────────────────────────── */
.payload-section {
margin-bottom: 8px;
}
.payload-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}

/* ── JsonTree ────────────────────────────────────────────── */
.jt-sec {
margin-bottom: 14px;
Expand Down Expand Up @@ -633,8 +704,8 @@ body {
font-weight: 700;
letter-spacing: 0.04em;
color: var(--purple);
background: rgba(188, 140, 255, 0.1);
border: 1px solid rgba(188, 140, 255, 0.3);
background: rgba(var(--purple-rgb), 0.1);
border: 1px solid rgba(var(--purple-rgb), 0.3);
border-radius: 3px;
padding: 1px 6px;
list-style: none;
Expand All @@ -653,8 +724,8 @@ details[open] > .jwt-summary::before {
.jwt-body {
margin-top: 6px;
padding: 8px 10px;
background: rgba(188, 140, 255, 0.04);
border: 1px solid rgba(188, 140, 255, 0.15);
background: rgba(var(--purple-rgb), 0.04);
border: 1px solid rgba(var(--purple-rgb), 0.15);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 11px;
Expand Down Expand Up @@ -706,7 +777,7 @@ details[open] > .jwt-summary::before {
.jwt-expired {
display: inline-flex;
align-items: center;
background: rgba(248, 81, 73, 0.15);
background: rgba(var(--red-rgb), 0.15);
color: var(--red);
font-size: 9px;
font-weight: 700;
Expand Down Expand Up @@ -852,11 +923,11 @@ details[open] > .jwt-summary::before {
font-size: 11px;
}
.fh-error {
background: rgba(248, 81, 73, 0.08);
background: rgba(var(--red-rgb), 0.08);
border-left: 3px solid var(--red);
}
.fh-warning {
background: rgba(210, 153, 34, 0.08);
background: rgba(var(--yellow-rgb), 0.08);
border-left: 3px solid var(--yellow);
}
.fh-header {
Expand Down Expand Up @@ -952,11 +1023,11 @@ details[open] > .jwt-summary::before {
}
.diag-issue-error {
border-left-color: var(--red);
background: rgba(248, 81, 73, 0.06);
background: rgba(var(--red-rgb), 0.06);
}
.diag-issue-warning {
border-left-color: var(--yellow);
background: rgba(210, 153, 34, 0.06);
background: rgba(var(--yellow-rgb), 0.06);
}
.diag-issue-info {
border-left-color: var(--blue);
Expand Down Expand Up @@ -1116,10 +1187,10 @@ body.resizing {
top: 100%;
left: 0;
z-index: 100;
background: var(--bg-2, #252526);
border: 1px solid var(--border, #3c3c3c);
background: var(--raised);
border: 1px solid var(--border);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 8px rgba(0, 0, 0, var(--shadow-alpha));
min-width: 140px;
padding: 2px 0;
}
Expand All @@ -1130,12 +1201,12 @@ body.resizing {
text-align: left;
background: none;
border: none;
color: var(--fg, #ccc);
color: var(--text);
cursor: pointer;
font-size: 11px;
}
.tb-dropdown-item:hover {
background: var(--bg-hover, #2a2d2e);
background: var(--hover);
}

/* ── Snapshot dropdown ────────────────────────────────── */
Expand Down Expand Up @@ -1192,7 +1263,7 @@ body.resizing {
}
.snapshot-delete:hover {
color: var(--red);
background: rgba(248, 81, 73, 0.1);
background: rgba(var(--red-rgb), 0.1);
}

/* ── Import banner ────────────────────────────────── */
Expand All @@ -1201,22 +1272,22 @@ body.resizing {
align-items: center;
justify-content: space-between;
padding: 4px 12px;
background: var(--bg-info, #063b49);
border-bottom: 1px solid var(--border, #3c3c3c);
background: var(--sel);
border-bottom: 1px solid var(--border);
font-size: 11px;
color: var(--fg, #ccc);
color: var(--text);
}
.import-banner-clear {
background: none;
border: 1px solid var(--border, #3c3c3c);
color: var(--fg, #ccc);
border: 1px solid var(--border);
color: var(--text);
padding: 1px 8px;
border-radius: 3px;
cursor: pointer;
font-size: 10px;
}
.import-banner-clear:hover {
background: var(--bg-hover, #2a2d2e);
background: var(--hover);
}

/* ── Import paste panel ─────────────────────────────── */
Expand Down
Loading
Loading