From 2898922a175f0410bc7069a9dbfdad9b63b5aebc Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 25 Jul 2026 10:18:19 +0800 Subject: [PATCH] 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. --- assets/css/frontend/floating-buttons.css | 45 ++++++++++++------- assets/css/frontend/nav.css | 33 ++++++++++++-- .../css/frontend/nav/header-menu-buttons.css | 35 +++++++++++++-- assets/css/frontend/nav/zib-utilities.css | 2 + assets/js/core/theme.js | 14 +++--- inc/helpers/header/aksrt-header-mobile.php | 2 +- inc/helpers/header/aksrt-header-navbar.php | 2 +- 7 files changed, 103 insertions(+), 30 deletions(-) diff --git a/assets/css/frontend/floating-buttons.css b/assets/css/frontend/floating-buttons.css index 46931f2f..e5108ad6 100644 --- a/assets/css/frontend/floating-buttons.css +++ b/assets/css/frontend/floating-buttons.css @@ -314,24 +314,28 @@ } } -.float-btn__icon-moon { - display: none; +/* + * Theme float glyph: light → moon, dark → sun. + * Match nav toggle + theme.js contract. Class-driven only. + */ +.float-right .float-btn__icon-sun { + display: none !important; } -.float-btn__icon-sun { - display: inline-block; +.float-right .float-btn__icon-moon { + display: inline-block !important; } -.theme-dark .float-btn__icon-moon, -html.dark .float-btn__icon-moon, -body.dark-theme .float-btn__icon-moon { - display: inline-block; +html.dark .float-right .float-btn__icon-moon, +body.theme-dark .float-right .float-btn__icon-moon, +body.dark-theme .float-right .float-btn__icon-moon { + display: none !important; } -.theme-dark .float-btn__icon-sun, -html.dark .float-btn__icon-sun, -body.dark-theme .float-btn__icon-sun { - display: none; +html.dark .float-right .float-btn__icon-sun, +body.theme-dark .float-right .float-btn__icon-sun, +body.dark-theme .float-right .float-btn__icon-sun { + display: inline-block !important; } /* VIP float rail entry */ @@ -348,14 +352,25 @@ body.dark-theme .float-btn__icon-sun { cursor: pointer; } -.theme-dark .float-right, +/* Dark: solid surface + brighter icon so transparent btn doesn't vanish */ html.dark .float-right, +body.theme-dark .float-right, body.dark-theme .float-right { - --float-btn-color: var(--color-ink-4); + --float-btn-color: var(--color-ink-2, #e5eef7); + --float-btn-bg: var(--surface-1, #323335); +} + +html.dark .float-right .float-btn, +body.theme-dark .float-right .float-btn, +body.dark-theme .float-right .float-btn { + border-color: rgba(255, 255, 255, 0.12); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); + color: var(--this-color, var(--float-btn-color)); + background: var(--this-bg, var(--float-btn-bg)); } -.theme-dark .float-right .hover-show-con, html.dark .float-right .hover-show-con, +body.theme-dark .float-right .hover-show-con, body.dark-theme .float-right .hover-show-con { background: var(--surface-2, #1f2430); border-color: rgba(255, 255, 255, 0.08); diff --git a/assets/css/frontend/nav.css b/assets/css/frontend/nav.css index a5dea0ed..a0f2e159 100644 --- a/assets/css/frontend/nav.css +++ b/assets/css/frontend/nav.css @@ -235,17 +235,42 @@ line-height: 1 !important; width: 1em !important; height: 1em !important; - display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center; vertical-align: 0 !important; } -/* Only one glyph visible */ -.navbar-top .toggle-theme .theme-icon-sun[style*="display:none"], -.navbar-top .toggle-theme .theme-icon-moon[style*="display:none"] { +/* + * Theme glyph visibility is driven by html.dark / body.theme-dark. + * Light: moon (switch to dark). Dark: sun (switch to light). + * Never force both icons to display:inline-flex — that stacked them. + */ +.navbar-top .toggle-theme .theme-icon-moon, +.navbar-but-cluster .toggle-theme .theme-icon-moon, +.navbar-top .toggle-theme .theme-icon-sun, +.navbar-but-cluster .toggle-theme .theme-icon-sun { display: none !important; } +.navbar-top .toggle-theme .theme-icon-moon, +.navbar-but-cluster .toggle-theme .theme-icon-moon { + display: inline-flex !important; +} +html.dark .navbar-top .toggle-theme .theme-icon-moon, +html.dark .navbar-but-cluster .toggle-theme .theme-icon-moon, +body.theme-dark .navbar-top .toggle-theme .theme-icon-moon, +body.theme-dark .navbar-but-cluster .toggle-theme .theme-icon-moon, +body.dark-theme .navbar-top .toggle-theme .theme-icon-moon, +body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-moon { + display: none !important; +} +html.dark .navbar-top .toggle-theme .theme-icon-sun, +html.dark .navbar-but-cluster .toggle-theme .theme-icon-sun, +body.theme-dark .navbar-top .toggle-theme .theme-icon-sun, +body.theme-dark .navbar-but-cluster .toggle-theme .theme-icon-sun, +body.dark-theme .navbar-top .toggle-theme .theme-icon-sun, +body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { + display: inline-flex !important; +} /* --- Dropdown circular badges (header-user-href) keep 36px --- */ .navbar-top .header-user-href .toggle-radius, diff --git a/assets/css/frontend/nav/header-menu-buttons.css b/assets/css/frontend/nav/header-menu-buttons.css index c57c14a2..75b0babf 100644 --- a/assets/css/frontend/nav/header-menu-buttons.css +++ b/assets/css/frontend/nav/header-menu-buttons.css @@ -643,7 +643,6 @@ body.theme-dark body > .drop-newadd .newadd-btns__item { width: 1em; height: 1em; text-align: center; - display: inline-flex; align-items: center; justify-content: center; } @@ -668,11 +667,39 @@ body.theme-dark body > .drop-newadd .newadd-btns__item { text-align: center; } -/* Hide inactive sun/moon without leaving layout shift */ -.toggle-theme .theme-icon-sun[style*="display:none"], -.toggle-theme .theme-icon-moon[style*="display:none"] { +/* Light: moon only. Dark: sun only. (class-driven, not inline style) */ +.theme-toggle-desktop .theme-icon-sun, +.theme-toggle-mobile .theme-icon-sun, +.toggle-theme .theme-icon-sun { display: none !important; } +.theme-toggle-desktop .theme-icon-moon, +.theme-toggle-mobile .theme-icon-moon, +.toggle-theme .theme-icon-moon { + display: inline-flex !important; +} +html.dark .theme-toggle-desktop .theme-icon-moon, +html.dark .theme-toggle-mobile .theme-icon-moon, +html.dark .toggle-theme .theme-icon-moon, +body.theme-dark .theme-toggle-desktop .theme-icon-moon, +body.theme-dark .theme-toggle-mobile .theme-icon-moon, +body.theme-dark .toggle-theme .theme-icon-moon, +body.dark-theme .theme-toggle-desktop .theme-icon-moon, +body.dark-theme .theme-toggle-mobile .theme-icon-moon, +body.dark-theme .toggle-theme .theme-icon-moon { + display: none !important; +} +html.dark .theme-toggle-desktop .theme-icon-sun, +html.dark .theme-toggle-mobile .theme-icon-sun, +html.dark .toggle-theme .theme-icon-sun, +body.theme-dark .theme-toggle-desktop .theme-icon-sun, +body.theme-dark .theme-toggle-mobile .theme-icon-sun, +body.theme-dark .toggle-theme .theme-icon-sun, +body.dark-theme .theme-toggle-desktop .theme-icon-sun, +body.dark-theme .theme-toggle-mobile .theme-icon-sun, +body.dark-theme .toggle-theme .theme-icon-sun { + display: inline-flex !important; +} /* float commerce */ .float-btn-shop-cart { diff --git a/assets/css/frontend/nav/zib-utilities.css b/assets/css/frontend/nav/zib-utilities.css index 7cc2fc04..04f8dc0b 100644 --- a/assets/css/frontend/nav/zib-utilities.css +++ b/assets/css/frontend/nav/zib-utilities.css @@ -298,6 +298,7 @@ body.mobile-navbar-show { overflow: hidden; } overflow: hidden; vertical-align: middle; flex-shrink: 0; + position: relative; } .navbar-top .navbar-form .toggle-theme.toggle-radius > i, .navbar-top a.toggle-theme.toggle-radius > i { @@ -308,6 +309,7 @@ body.mobile-navbar-show { overflow: hidden; } margin: auto; transform: translateY(-50%); line-height: 1; + /* visibility handled by theme-class rules in nav.css / header-menu-buttons.css */ } /* Menu item title + icon baseline (when menu is assigned) */ .navbar-top .nav > li > a { diff --git a/assets/js/core/theme.js b/assets/js/core/theme.js index 251878a8..8615b2eb 100644 --- a/assets/js/core/theme.js +++ b/assets/js/core/theme.js @@ -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"); diff --git a/inc/helpers/header/aksrt-header-mobile.php b/inc/helpers/header/aksrt-header-mobile.php index 002f8cb7..c491d347 100644 --- a/inc/helpers/header/aksrt-header-mobile.php +++ b/inc/helpers/header/aksrt-header-mobile.php @@ -73,7 +73,7 @@ if (!function_exists('aksrt_nav_mobile_content')) : $top_btns .= ''; $top_btns .= ''; - $top_btns .= ''; + $top_btns .= ''; $top_btns .= ''; } if ($m_layout !== 'center' && !empty($ctx['search_enabled'])) { diff --git a/inc/helpers/header/aksrt-header-navbar.php b/inc/helpers/header/aksrt-header-navbar.php index 2819c48c..dbdbd637 100644 --- a/inc/helpers/header/aksrt-header-navbar.php +++ b/inc/helpers/header/aksrt-header-navbar.php @@ -310,7 +310,7 @@ if (!function_exists('aksrt_menu_button')) : $radius_but .= ''; $radius_but .= ''; - $radius_but .= ''; + $radius_but .= ''; $radius_but .= ''; } if (function_exists('aksrt_get_translate_language_btn')) {