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>

Author: chicago-joe

custom.css

@@ -184,12 +184,31 @@ nav.myst-top-nav-bar a.inline-block[href$=".pdf"]:hover {
   color: var(--accent-hover) !important;
 }
 
-/* Dark mode toggle icon */
-nav.myst-top-nav-bar button img {
-  filter: brightness(0.4);
+/* Move theme toggle to far left of nav bar */
+nav.myst-top-nav-bar {
+  position: relative;
+}
+
+button.myst-theme-button {
+  position: absolute !important;
+  left: 0.75rem !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  margin: 0 !important;
+  z-index: 2 !important;
+}
+
+/* Shift branding right to clear the toggle (40px button + 12px left + 8px gap) */
+nav.myst-top-nav-bar a.myst-home-link {
+  margin-left: 3.5rem !important;
+}
+
+/* Dark mode toggle icon tinting */
+button.myst-theme-button svg {
+  opacity: 0.7;
 }
-html.dark nav.myst-top-nav-bar button img {
-  filter: brightness(0) invert(1) opacity(0.6);
+html.dark button.myst-theme-button svg {
+  opacity: 0.85;
 }
 
 /* TOC sidebar — no branding leak */

myst.yml

@@ -60,6 +60,7 @@ site:
     numbered_headers: false
     folders: false
     scripts:
+      - scripts/theme-default.js
       - https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js
       - https://cdn.plot.ly/plotly-latest.min.js
       - scripts/html-autosize.js

scripts/theme-default.js

@@ -0,0 +1,12 @@
+// Seed light mode as default for first-time visitors.
+// MyST book-theme uses 'myst:theme' in localStorage; if nothing is stored
+// it falls back to prefers-color-scheme which may be dark on user systems.
+// This script sets light as the explicit default without touching the DOM,
+// so React hydration is never affected.
+(function () {
+  try {
+    if (!localStorage.getItem('myst:theme')) {
+      localStorage.setItem('myst:theme', 'light');
+    }
+  } catch (e) {}
+})();