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

@@ -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 {
+.float-right .float-btn__icon-moon {
-    display: inline-block;
+    display: inline-block !important;
 }
 
-.theme-dark .float-btn__icon-moon,
+html.dark .float-right .float-btn__icon-moon,
-html.dark .float-btn__icon-moon,
+body.theme-dark .float-right .float-btn__icon-moon,
-body.dark-theme .float-btn__icon-moon {
+body.dark-theme .float-right .float-btn__icon-moon {
-    display: inline-block;
+    display: none !important;
 }
 
-.theme-dark .float-btn__icon-sun,
+html.dark .float-right .float-btn__icon-sun,
-html.dark .float-btn__icon-sun,
+body.theme-dark .float-right .float-btn__icon-sun,
-body.dark-theme .float-btn__icon-sun {
+body.dark-theme .float-right .float-btn__icon-sun {
-    display: none;
+    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);

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"],
+ * Theme glyph visibility is driven by html.dark / body.theme-dark.
-.navbar-top .toggle-theme .theme-icon-moon[style*="display:none"] {
+ * 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,

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 */
+/* Light: moon only. Dark: sun only. (class-driven, not inline style) */
-.toggle-theme .theme-icon-sun[style*="display:none"],
+.theme-toggle-desktop .theme-icon-sun,
-.toggle-theme .theme-icon-moon[style*="display:none"] {
+.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 {

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 {

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) {
+      if (moon) {
-        // Light mode: show moon (click to go dark). Dark mode: show sun.
+        moon.removeAttribute("style");
-        moon.style.display = isDark ? "none" : "";
+        moon.setAttribute("aria-hidden", isDark ? "true" : "false");
-        sun.style.display = isDark ? "" : "none";
+      }
+      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");

inc/helpers/header/aksrt-header-mobile.php

@@ -73,7 +73,7 @@ if (!function_exists('aksrt_nav_mobile_content')) :
 			$top_btns .= '<a href="javascript:;" class="toggle-theme toggle-radius" id="theme-toggle-mobile" title="'
 				. esc_attr__('切换亮暗色', 'aksrt') . '">';
 			$top_btns .= '<i class="fas fa-moon theme-icon-moon" aria-hidden="true"></i>';
-			$top_btns .= '<i class="fas fa-sun theme-icon-sun" aria-hidden="true" style="display:none"></i>';
+			$top_btns .= '<i class="fas fa-sun theme-icon-sun" aria-hidden="true"></i>';
 			$top_btns .= '</a>';
 		}
 		if ($m_layout !== 'center' && !empty($ctx['search_enabled'])) {

inc/helpers/header/aksrt-header-navbar.php

@@ -310,7 +310,7 @@ if (!function_exists('aksrt_menu_button')) :
 			$radius_but .= '<a href="javascript:;" class="toggle-theme toggle-radius" id="theme-toggle-desktop" title="'
 				. esc_attr__('切换亮暗色', 'aksrt') . '">';
 			$radius_but .= '<i class="fas fa-moon theme-icon-moon" aria-hidden="true"></i>';
-			$radius_but .= '<i class="fas fa-sun theme-icon-sun" aria-hidden="true" style="display:none"></i>';
+			$radius_but .= '<i class="fas fa-sun theme-icon-sun" aria-hidden="true"></i>';
 			$radius_but .= '</a>';
 		}
 		if (function_exists('aksrt_get_translate_language_btn')) {