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

fix(nav): restore reference theme toggle geometry and single binding

Browse Source 
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:
kate522andClaude Opus 5 committed 2026-11-02 22:24:20 +08:00
1 parent e30de6562c
commit 030baa511e
9 files changed
+19 -139
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/js/runtime/main.js
-79
View File
@@ -2766,85 +2766,6 @@ jQuery.fn.autoAffix = function (top, bottom) {
return _this;
};
// 切换主题
_win.bd.on('click', '.toggle-theme', function (event) {
var isDark = jQuery('body').hasClass('dark-theme');
// 检查浏览器是否支持 View Transition API
if (!document.startViewTransition) {
// 不支持则直接切换主题，不添加动画
toggle();
return;
}
const transition = document.startViewTransition(() => {
toggle();
});
const { clientX, clientY } = event;
const endRadius = Math.hypot(Math.max(clientX, innerWidth - clientX), Math.max(clientY, innerHeight - clientY));
const clipPath = [`circle(0px at ${clientX}px ${clientY}px)`, `circle(${endRadius}px at ${clientX}px ${clientY}px)`];
transition.ready.then(() => {
document.documentElement.animate(
{
clipPath: isDark ? [...clipPath].reverse() : clipPath,
},
{
duration: 500,
easing: isDark ? 'ease-out' : 'ease-in',
fill: 'both', // 保持动画结束状态，避免闪烁
pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
}
);
});
function toggle() {
var highlight_white_zt = 'enlighter-t-' + _win.highlight_white_zt;
var highlight_dark_zt = 'enlighter-t-' + _win.highlight_dark_zt;
jQuery('img[switch-src]').each(function () {
var _this = jQuery(this);
var _src = _this.attr('data-src') || _this.attr('src');
var _s_src = _this.attr('switch-src');
_this.attr('src', _s_src).attr('switch-src', _src).attr('data-src', '');
});
jQuery('img[white-src],img[dark-src]').each(function () {
var _this = jQuery(this);
var _s_src = isDark ? _this.attr('white-src') : _this.attr('dark-src');
if (!_s_src) {
return;
}
_this.attr('src', _s_src);
});
var _enlighter = jQuery('.enlighter-default');
var _body = jQuery('body');
var _tinymce_body = jQuery('#post_content_ifr').contents().find('body');
if (!isDark) {
jQuery('meta[name="theme-color"]').attr('content', '#2F3135');
document.documentElement.classList.add('dark');
_tinymce_body.addClass('dark-theme');
_enlighter.removeClass(highlight_white_zt).addClass(highlight_dark_zt);
_body.addClass('dark-theme'),
jQuery.cookie('theme_mode', 'dark-theme', {
path: '/',
});
} else {
jQuery('meta[name="theme-color"]').attr('content', '#FDFCFE');
document.documentElement.classList.remove('dark');
_tinymce_body.removeClass('dark-theme');
_enlighter.removeClass(highlight_dark_zt).addClass(highlight_white_zt);
_body.removeClass('dark-theme'),
jQuery.cookie('theme_mode', 'white-theme', {
path: '/',
});
}
}
});
_win.bd.on('click', '[ajax-action]', function () {
var _this = jQuery(this);
if (_this.attr('disabled')) return false;