File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff 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>
Original file line number Diff line number Diff 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 ,
You can’t perform that action at this time.
0 commit comments