Skip to content

Commit 3306a1e

Browse files
ImmutableJeffreyclaude
ImmutableJeffrey
and
claude
committed
feat: add light/dark mode toggle to demo page
CSS custom properties for both themes. Toggle button in top-right. Onyx dark by default, clean white light mode. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent e1c593b commit 3306a1e

1 file changed

Lines changed: 59 additions & 28 deletions

File tree

‎packages/audience/web/demo/index.html‎

Lines changed: 59 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,60 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Audience Web SDK — Demo</title>
77
<style>
8+
:root {
9+
--bg: #050505; --card: #0f0f0f; --border: #1c1c1c; --accent: #888888;
10+
--text: #c0c0c0; --text-strong: #e8e8e8; --text-muted: #606060;
11+
--danger: #ef4444; --primary-bg: #e8e8e8; --primary-text: #050505;
12+
--primary-hover: #c0c0c0; --btn-bg: #1a1a1a; --btn-border: #2a2a2a;
13+
--btn-hover: #242424; --input-bg: #050505; --log-bg: #030303;
14+
--log-border: #141414; --log-time: #444444; --log-method: #d0d0d0;
15+
}
16+
[data-theme="light"] {
17+
--bg: #fafafa; --card: #ffffff; --border: #e4e4e7; --accent: #71717a;
18+
--text: #3f3f46; --text-strong: #18181b; --text-muted: #a1a1aa;
19+
--danger: #dc2626; --primary-bg: #18181b; --primary-text: #fafafa;
20+
--primary-hover: #3f3f46; --btn-bg: #f4f4f5; --btn-border: #d4d4d8;
21+
--btn-hover: #e4e4e7; --input-bg: #ffffff; --log-bg: #f4f4f5;
22+
--log-border: #e4e4e7; --log-time: #a1a1aa; --log-method: #18181b;
23+
}
824
* { box-sizing: border-box; margin: 0; padding: 0; }
9-
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #050505; color: #c0c0c0; padding: 32px 24px; max-width: 960px; margin: 0 auto; }
10-
h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; color: #e8e8e8; letter-spacing: -0.3px; }
11-
.subtitle { color: #606060; font-size: 13px; margin-bottom: 28px; }
12-
.section { background: #0f0f0f; border: 1px solid #1c1c1c; border-radius: 10px; padding: 18px; margin-bottom: 14px; }
13-
.section h2 { font-size: 11px; color: #888888; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
25+
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); padding: 32px 24px; max-width: 960px; margin: 0 auto; transition: background 0.2s, color 0.2s; }
26+
h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; color: var(--text-strong); letter-spacing: -0.3px; }
27+
.subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 28px; }
28+
.section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 14px; }
29+
.section h2 { font-size: 11px; color: var(--accent); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
1430
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
15-
button { background: #1a1a1a; border: 1px solid #2a2a2a; color: #c0c0c0; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; transition: all 0.15s; }
16-
button:hover { background: #242424; border-color: #888888; color: #e8e8e8; }
17-
button.primary { background: #e8e8e8; border-color: #e8e8e8; color: #050505; font-weight: 500; }
18-
button.primary:hover { background: #c0c0c0; }
19-
button.danger { border-color: #ef4444; color: #ef4444; }
20-
button.danger:hover { background: #ef444418; }
21-
input, select { background: #050505; border: 1px solid #2a2a2a; color: #c0c0c0; padding: 8px 10px; border-radius: 6px; font-size: 13px; font-family: inherit; transition: border-color 0.15s; }
22-
input:focus, select:focus { outline: none; border-color: #888888; }
31+
button { background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--text); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; transition: all 0.15s; }
32+
button:hover { background: var(--btn-hover); border-color: var(--accent); color: var(--text-strong); }
33+
button.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-text); font-weight: 500; }
34+
button.primary:hover { background: var(--primary-hover); }
35+
button.danger { border-color: var(--danger); color: var(--danger); }
36+
button.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
37+
input, select { background: var(--input-bg); border: 1px solid var(--btn-border); color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 13px; font-family: inherit; transition: border-color 0.15s; }
38+
input:focus, select:focus { outline: none; border-color: var(--accent); }
2339
input { width: 200px; }
2440
select { min-width: 120px; }
25-
label { font-size: 11px; color: #606060; display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
41+
label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
2642
.field { display: flex; flex-direction: column; }
27-
#log { background: #030303; border: 1px solid #1c1c1c; border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.7; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; }
28-
.log-entry { border-bottom: 1px solid #141414; padding: 4px 0; }
29-
.log-time { color: #444444; }
30-
.log-method { color: #d0d0d0; font-weight: 600; }
31-
.log-ok { color: #888888; }
32-
.log-err { color: #ef4444; }
33-
.log-info { color: #888888; }
43+
#log { background: var(--log-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.7; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; }
44+
.log-entry { border-bottom: 1px solid var(--log-border); padding: 4px 0; }
45+
.log-time { color: var(--log-time); }
46+
.log-method { color: var(--log-method); font-weight: 600; }
47+
.log-ok { color: var(--accent); }
48+
.log-err { color: var(--danger); }
49+
.log-info { color: var(--accent); }
3450
.status-bar { display: flex; gap: 16px; font-size: 12px; padding: 10px 0; }
35-
.status-bar span { color: #606060; }
36-
.status-bar strong { color: #e8e8e8; }
51+
.status-bar span { color: var(--text-muted); }
52+
.status-bar strong { color: var(--text-strong); }
3753
#consent-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
54+
.theme-toggle { position: fixed; top: 16px; right: 16px; background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--text); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: inherit; z-index: 10; }
55+
.theme-toggle:hover { background: var(--btn-hover); border-color: var(--accent); }
3856
</style>
3957
<link rel="preconnect" href="https://fonts.googleapis.com">
4058
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
4159
</head>
4260
<body>
61+
<button class="theme-toggle" onclick="toggleTheme()">Light / Dark</button>
4362
<h1>Audience Web SDK — Demo</h1>
4463
<p class="subtitle">End-to-end testing against dev/sandbox backend. Open DevTools Network tab to see requests.</p>
4564

@@ -77,10 +96,10 @@ <h2>1. Initialise</h2>
7796
</div>
7897
</div>
7998
<div class="row">
80-
<label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#c0c0c0">
99+
<label style="display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text)">
81100
<input type="checkbox" id="auto-page"> Auto track page views
82101
</label>
83-
<label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#c0c0c0">
102+
<label style="display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text)">
84103
<input type="checkbox" id="debug-mode" checked> Debug mode
85104
</label>
86105
</div>
@@ -207,8 +226,9 @@ <h2>Event Log</h2>
207226
const level = consentCookie ? consentCookie[1] : '—';
208227
const badge = document.getElementById('consent-badge');
209228
badge.textContent = level;
210-
badge.style.background = level === 'full' ? '#e8e8e8' : level === 'anonymous' ? '#888888' : level === 'none' ? '#ef4444' : '#444444';
211-
badge.style.color = level === 'full' ? '#050505' : level === 'anonymous' ? '#050505' : '#fff';
229+
const isDark = !document.documentElement.hasAttribute('data-theme');
230+
badge.style.background = level === 'full' ? (isDark ? '#e8e8e8' : '#18181b') : level === 'anonymous' ? '#888888' : level === 'none' ? 'var(--danger)' : '#444444';
231+
badge.style.color = level === 'full' ? (isDark ? '#050505' : '#fafafa') : level === 'anonymous' ? '#fff' : '#fff';
212232
badge.style.color = '#fff';
213233
}
214234

@@ -321,7 +341,8 @@ <h2>Event Log</h2>
321341
return res.json();
322342
})
323343
.then(data => {
324-
const color = data.status === 'full' ? '#e8e8e8' : data.status === 'anonymous' ? '#888888' : data.status === 'none' ? '#ef4444' : '#606060';
344+
const isLight = document.documentElement.hasAttribute('data-theme');
345+
const color = data.status === 'full' ? (isLight ? '#18181b' : '#e8e8e8') : data.status === 'anonymous' ? '#888888' : data.status === 'none' ? '#ef4444' : '#888888';
325346
el.innerHTML = `Server consent for <strong>${anonId.slice(0, 12)}...</strong>: <strong style="color:${color}">${data.status}</strong>`;
326347
log('verify', { anonymousId: anonId, serverStatus: data.status }, 'ok');
327348
})
@@ -331,6 +352,16 @@ <h2>Event Log</h2>
331352
});
332353
};
333354

355+
window.toggleTheme = function() {
356+
const html = document.documentElement;
357+
if (html.hasAttribute('data-theme')) {
358+
html.removeAttribute('data-theme');
359+
} else {
360+
html.setAttribute('data-theme', 'light');
361+
}
362+
updateStatus();
363+
};
364+
334365
// Initial status
335366
updateStatus();
336367
</script>

0 commit comments

Comments
 (0)