fix(theme): stop sun/moon overlap and restore dark float contrast
Drive toggle glyphs with html.dark/body theme classes only, drop inline display styles that lost to !important CSS, and give the float rail a solid surface + brighter ink in dark mode.
This commit is contained in:
1 parent
b5f13c4a1f
commit
2898922a17
7 files changed
+103
-30
No files matched your search
@@ -157,19 +157,23 @@
|
||||
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, #float-theme-toggle, .toggle-theme, .theme-toggle-btn, [data-action='toggle-theme']").forEach(function (btn) {
|
||||
if (!btn) return;
|
||||
btn.setAttribute("aria-pressed", isDark ? "true" : "false");
|
||||
btn.classList.toggle("is-dark", isDark);
|
||||
var moon = btn.querySelector(".theme-icon-moon, .float-btn__icon-moon");
|
||||
var sun = btn.querySelector(".theme-icon-sun, .float-btn__icon-sun");
|
||||
if (moon && sun) {
|
||||
// Light mode: show moon (click to go dark). Dark mode: show sun.
|
||||
moon.style.display = isDark ? "none" : "";
|
||||
sun.style.display = isDark ? "" : "none";
|
||||
if (moon) {
|
||||
moon.removeAttribute("style");
|
||||
moon.setAttribute("aria-hidden", isDark ? "true" : "false");
|
||||
}
|
||||
if (sun) {
|
||||
sun.removeAttribute("style");
|
||||
sun.setAttribute("aria-hidden", isDark ? "false" : "true");
|
||||
}
|
||||
});
|
||||
// Keep legacy float id path for float-btn__icon-* class names already handled above.
|
||||
var floatBtn = document.getElementById("float-theme-toggle");
|
||||
if (floatBtn) {
|
||||
floatBtn.setAttribute("aria-pressed", isDark ? "true" : "false");
|
||||
|
||||
Reference in new issue
Block a user