Skip to content

Commit 0072aea

Browse files
style: icon-only moon/sun theme toggle in header corner
1 parent 2077b3d commit 0072aea

2 files changed

Lines changed: 27 additions & 2 deletions

File tree

src/ui.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function installThemeToggle(): void {
134134
const syncLabel = (): void => {
135135
const isDark = root.dataset.theme !== "light";
136136
if (button) {
137-
button.textContent = isDark ? "☀ Light Mode" : "☾ Dark Mode";
137+
button.textContent = isDark ? "🌙" : "☀️";
138138
button.setAttribute("aria-label", isDark ? "Switch to light mode" : "Switch to dark mode");
139139
}
140140
};
@@ -306,7 +306,7 @@ function template(): string {
306306
<header class="hero" role="banner">
307307
<div class="chip-row" role="list" aria-label="Category and controls">
308308
<span class="chip category" role="listitem">Format-Preserving Encryption</span>
309-
<button id="theme-toggle" class="chip action" type="button" aria-label="Switch color theme">Switch to Light</button>
309+
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Switch color theme"></button>
310310
</div>
311311
<h1>Format Ward</h1>
312312
<p class="subtitle">Interactive FF1 and FF3-1 demo over real WebCrypto AES rounds from NIST SP 800-38G.</p>

styles/main.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ body {
123123

124124
/* ── Hero ── */
125125
.hero {
126+
position: relative;
126127
background: linear-gradient(145deg, var(--surface), var(--surface-2));
127128
border: 1px solid var(--border);
128129
border-radius: 20px;
@@ -181,6 +182,30 @@ h1 {
181182
justify-content: center;
182183
}
183184

185+
/* ── Theme toggle (icon button) ── */
186+
.theme-toggle {
187+
position: absolute;
188+
top: 0;
189+
right: 0;
190+
width: 2.6rem;
191+
height: 2.6rem;
192+
display: flex;
193+
align-items: center;
194+
justify-content: center;
195+
border: 1px solid var(--border);
196+
border-radius: 50%;
197+
background: color-mix(in srgb, var(--surface-2) 70%, transparent);
198+
color: var(--text);
199+
font-size: 1.25rem;
200+
cursor: pointer;
201+
line-height: 1;
202+
padding: 0;
203+
transition: background 0.15s ease;
204+
}
205+
.theme-toggle:hover {
206+
background: color-mix(in srgb, var(--accent) 25%, transparent);
207+
}
208+
184209
/* ── Sections ── */
185210
.why,
186211
.refs,

0 commit comments

Comments
 (0)