Skip to content

Commit 1847d82

Browse files
chicago-joeclaude
andcommitted
feat: light mode default + theme toggle to far left
- Add scripts/theme-default.js — seeds myst:theme=light in localStorage for first-time visitors; no DOM manipulation so React hydration is safe - Load theme-default.js first in myst.yml scripts array - Move .myst-theme-button to far left via position:absolute on nav bar - Shift .myst-home-link right (margin-left: 3.5rem) to clear the toggle button Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent a629e76 commit 1847d82

File tree

3 files changed

+37
-5
lines changed

3 files changed

+37
-5
lines changed

custom.css

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -184,12 +184,31 @@ nav.myst-top-nav-bar a.inline-block[href$=".pdf"]:hover {
184184
color: var(--accent-hover) !important;
185185
}
186186

187-
/* Dark mode toggle icon */
188-
nav.myst-top-nav-bar button img {
189-
filter: brightness(0.4);
187+
/* Move theme toggle to far left of nav bar */
188+
nav.myst-top-nav-bar {
189+
position: relative;
190+
}
191+
192+
button.myst-theme-button {
193+
position: absolute !important;
194+
left: 0.75rem !important;
195+
top: 50% !important;
196+
transform: translateY(-50%) !important;
197+
margin: 0 !important;
198+
z-index: 2 !important;
199+
}
200+
201+
/* Shift branding right to clear the toggle (40px button + 12px left + 8px gap) */
202+
nav.myst-top-nav-bar a.myst-home-link {
203+
margin-left: 3.5rem !important;
204+
}
205+
206+
/* Dark mode toggle icon tinting */
207+
button.myst-theme-button svg {
208+
opacity: 0.7;
190209
}
191-
html.dark nav.myst-top-nav-bar button img {
192-
filter: brightness(0) invert(1) opacity(0.6);
210+
html.dark button.myst-theme-button svg {
211+
opacity: 0.85;
193212
}
194213

195214
/* TOC sidebar — no branding leak */

myst.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ site:
6060
numbered_headers: false
6161
folders: false
6262
scripts:
63+
- scripts/theme-default.js
6364
- https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js
6465
- https://cdn.plot.ly/plotly-latest.min.js
6566
- scripts/html-autosize.js

scripts/theme-default.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Seed light mode as default for first-time visitors.
2+
// MyST book-theme uses 'myst:theme' in localStorage; if nothing is stored
3+
// it falls back to prefers-color-scheme which may be dark on user systems.
4+
// This script sets light as the explicit default without touching the DOM,
5+
// so React hydration is never affected.
6+
(function () {
7+
try {
8+
if (!localStorage.getItem('myst:theme')) {
9+
localStorage.setItem('myst:theme', 'light');
10+
}
11+
} catch (e) {}
12+
})();

0 commit comments

Comments
 (0)