主题切换

2025-04-01 | 0 浏览 | 0 评论

主题切换

see https://ld246.com/article/1734957026187

这里是示例代码，根据自己的需要修改

// 切换主题后需刷新页面才能生效

// 普通文档：siyuan.storage["local-images"].file='1f4c4'
// 含有子文档的父文档：siyuan.storage["local-images"].folder='1f4d1'
// 笔记本：siyuan.storage["local-images"].note='1f5c3'

// 亮色主题
if(siyuan.config.appearance.mode === 0) {
    // 默认主题
    if(siyuan.config.appearance.themeLight === 'daylight'){
        siyuan.storage["local-images"].folder = '1F4C1'
        siyuan.storage["local-images"].file = '1f4dc'
    }
    // 其他主题
    if(siyuan.config.appearance.themeLight === '') {
  
    }
}
// 暗色主题
else {
    // 默认主题
    if(siyuan.config.appearance.themeDark === 'midnight'){
        siyuan.storage["local-images"].folder = '1F5C1'
        siyuan.storage["local-images"].file = '1f4c4'
    }
    // 其他主题
    if(siyuan.config.appearance.themeDark === '') {
  
    }
}

如果需要监听主题切换刷新页面，示例代码如下

// 监听主题切换
(()=>{
    // 当主题色变化时执行
    observeThemeModeChange((newMode) => {
        if(newMode === 'light') {
            // 亮色主题
            // 你的代码
        } else {
            // 暗色主题
            // 你的代码
        }
        // 刷新页面
        location.reload();
    });
  
    function observeThemeModeChange(callback) {
        // 选择目标节点
        const targetNode = document.documentElement; // <html> 元素
  
        // 配置观察选项:
        const config = { attributes: true, attributeFilter: ['data-theme-mode'] };
  
        // 当观察到变动时的回调函数
        const mutationCallback = function(mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme-mode') {
                    const newValue = document.documentElement.getAttribute('data-theme-mode');
                    // 调用用户提供的回调函数
                    if (typeof callback === 'function') {
                        callback(newValue);
                    }
                }
            }
        };
  
        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(mutationCallback);
  
        // 开始观察目标节点
        observer.observe(targetNode, config);
  
        // 返回一个停止观察的方法
        return {
            disconnect: () => observer.disconnect()
        };
    }
})();

笔记