Mazer 主题中 Light/Dark 切换失效问题的分析与解决

在基于 Livewire 框架使用 Mazer 主题模板时，开发者可能会遇到一个典型问题：主题的 Light/Dark 模式切换功能在页面导航后会突然失效，必须刷新页面才能恢复正常。这种现象在单页应用（SPA）或使用 Livewire 全页面组件时尤为常见。

问题本质

这种现象的核心原因是 JavaScript 执行环境在页面局部更新时没有被正确保留。Mazer 主题的 Light/Dark 切换功能依赖于客户端的 JavaScript 代码来监听切换事件并修改文档的 class 属性。当使用 Livewire 进行全页面组件切换时，虽然看起来是同一个页面，但实际上浏览器会重新加载部分 DOM 结构。

根本原因分析

1. JavaScript 执行上下文丢失：Livewire 的页面切换可能导致之前绑定的 JavaScript 事件监听器被移除
2. DOM 重建问题：切换后的新 DOM 可能没有重新初始化主题切换功能
3. 状态同步缺失：主题偏好设置（存储在 localStorage 中）与新加载的组件之间缺乏自动同步机制

解决方案

方案一：确保 JavaScript 正确加载

在 Livewire 组件中，确保 Mazer 的 JavaScript 文件被正确引入。这包括：

<!-- 在布局文件中确保加载 -->
<script src="/assets/js/app.js"></script>

方案二：使用 Livewire 生命周期钩子

对于使用 Livewire 的情况，可以在组件加载时手动重新初始化主题：

class YourComponent extends Component
{
    public function hydrate()
    {
        // 确保主题状态与 localStorage 同步
        if(request()->hasHeader('X-Livewire')) {
            $this->dispatchBrowserEvent('theme-init');
        }
    }
}

方案三：自定义持久化解决方案

创建一个更健壮的主题管理方案：

document.addEventListener('livewire:load', function() {
    // 初始化主题
    initTheme();
    
    // 监听主题切换事件
    document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
});

function initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);
}

function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
}

最佳实践建议

1. 状态集中管理：将主题状态提升到全局状态管理
2. 事件委托：使用事件委托来避免事件监听器丢失
3. CSS 变量：考虑使用 CSS 变量来实现主题切换，减少 JavaScript 依赖
4. Livewire 特性：利用 Livewire 的持久化特性来保持主题状态

通过以上方法，可以确保 Mazer 主题的 Light/Dark 切换功能在 Livewire 全页面组件环境下也能稳定工作，提供一致的用户体验。