fix(nav): restore reference theme toggle geometry and single binding
The top-bar theme switch was bound twice — core/theme.js attached a click handler to #theme-toggle-desktop while runtime/main.js delegated click on .toggle-theme, and both ship in main.min.js, so one press toggled twice and the button looked dead. Also realign the control with the reference: - Drop the far modifier from fa-toggle-theme so the sun/moon glyphs resolve against the Solid face at the reference weight instead of Regular. - Restore .toggle-radius .fa/.icon to the reference form (left/right 0 + auto margin only). The extra position/top/transform/size/flex block and the > i selector were overriding the shared abs-* centering rule. - Replace the per-ID bindings with one delegated listener so the floating rail, which carries no id, keeps working. - Remove dead theme.js queries for selectors no markup or stylesheet ships (#theme-toggle, #dropdown-theme-toggle, .theme-icon-moon/.theme-icon-sun, [data-action='toggle-theme'], .is-dark). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
e30de6562c
commit
030baa511e
9 files changed
+19
-139
No files matched your search
+12
-31
@@ -157,25 +157,11 @@
|
||||
syncThemeImages(isDark);
|
||||
syncCodeHighlightTheme(isDark);
|
||||
dispatchThemeChange(isDark);
|
||||
// Icon visibility is CSS-driven via html.dark / body.theme-dark.
|
||||
// Only sync a11y state here — do not set inline display (fights !important CSS).
|
||||
document.querySelectorAll("#theme-toggle, #theme-toggle-desktop, #theme-toggle-mobile, #dropdown-theme-toggle, .toggle-theme, [data-action='toggle-theme']").forEach(function (btn) {
|
||||
if (!btn) return;
|
||||
// Glyph visibility (sun / moon slide) is CSS-driven off .toggle-theme's
|
||||
// ::before / ::after and the .dark-theme body class — no JS here.
|
||||
document.querySelectorAll(".toggle-theme").forEach(function (btn) {
|
||||
btn.setAttribute("aria-pressed", isDark ? "true" : "false");
|
||||
btn.classList.toggle("is-dark", isDark);
|
||||
var moon = btn.querySelector(".theme-icon-moon");
|
||||
var sun = btn.querySelector(".theme-icon-sun");
|
||||
if (moon) {
|
||||
moon.removeAttribute("style");
|
||||
moon.setAttribute("aria-hidden", isDark ? "true" : "false");
|
||||
}
|
||||
if (sun) {
|
||||
sun.removeAttribute("style");
|
||||
sun.setAttribute("aria-hidden", isDark ? "false" : "true");
|
||||
}
|
||||
});
|
||||
var ddBtn = document.getElementById("dropdown-theme-toggle");
|
||||
if (ddBtn) ddBtn.setAttribute("aria-pressed", isDark ? "true" : "false");
|
||||
}
|
||||
|
||||
var themeInitialized = false;
|
||||
@@ -243,20 +229,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
function bindToggle(id) {
|
||||
var el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
el.addEventListener("click", function (event) {
|
||||
var next = document.body.classList.contains("theme-dark") ? "light" : "dark";
|
||||
setStoredTheme(next);
|
||||
runThemeTransition(next, event);
|
||||
});
|
||||
}
|
||||
|
||||
bindToggle("theme-toggle");
|
||||
bindToggle("theme-toggle-desktop");
|
||||
bindToggle("dropdown-theme-toggle");
|
||||
bindToggle("theme-toggle-mobile");
|
||||
// Delegated so every current and future .toggle-theme anchor works — the
|
||||
// header, the mobile drawer and the floating rail all share one binding.
|
||||
document.addEventListener("click", function (event) {
|
||||
var btn = event.target && event.target.closest ? event.target.closest(".toggle-theme") : null;
|
||||
if (!btn) return;
|
||||
var next = document.body.classList.contains("theme-dark") ? "light" : "dark";
|
||||
setStoredTheme(next);
|
||||
runThemeTransition(next, event);
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
|
||||
Reference in new issue
Block a user