[js] 思源笔记文档添加动态图标自定义颜色

思源笔记 v3.1.12 支持文档添加动态图标了

但是默认的配色我不是很喜欢，所以就在 GPT 的帮助下，写了一个 js 代码片段，可以修改配色

JS 代码片段

(async () => {

    // 定义观察DOM变化的函数
    function observeDomChange(targetNode, callback) {
        const config = { childList: true, subtree: true };
        const observer = new MutationObserver((mutationsList) => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    callback(mutation);
                }
            }
        });
        observer.observe(targetNode, config);
        return observer;
    }

    // 定义颜色替换的逻辑
    function updateColors() {
        // 定义新的颜色数组
        const newColors = [
            "#d13d51", // red
            "#3eb0ea", // blue
            "#eec468", // yellow
            "#52E0B8", // green
            "#a36cda", // purple
            "#f183aa", // pink
            "#f3865e", // orange
            "#576574" // grey
        ];

        const colorSquares = document.querySelectorAll('.fn__flex.emoji__dynamic-color .color__square');
        colorSquares.forEach((square, index) => {
                square.setAttribute('style', `background-color:${newColors[index]}`);
        });

    }

    // 选择要观察的节点（通常是整个文档或特定的容器）
    const targetNode = document.body;

    // 开始观察DOM变化，并在检测到.color__square元素时运行updateColors
    observeDomChange(targetNode, (mutation) => {
        // 监听代码列表的弹窗事件
        if (mutation.target.classList.contains("fn__flex")) {
            const dialog_emoji_open = document.querySelector('.b3-dialog--open[data-key="dialog-emojis"]');
            if (dialog_emoji_open) {
                updateColors();
            }
        }

    });


})();
​

效果

改进前

改进后