kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): stop sun/moon overlap and restore dark float contrast

Browse Source 
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:
kate522
2026-07-25 10:18:19 +08:00
parent b5f13c4a1f
commit 2898922a17
7 changed files with 103 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/floating-buttons.css
+30 -15
View File
@@ -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);
assets/css/frontend/nav.css
+29 -4
View File
@@ -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,
assets/css/frontend/nav/header-menu-buttons.css
+31 -4
View File
@@ -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 {
assets/css/frontend/nav/zib-utilities.css
+2
View File
@@ -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
+9 -5
View File
@@ -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");