☰

修改小红书 PWA 标题栏颜色

修改小红书 PWA 标题栏颜色为 #0A0A0A

// ==UserScript==
// @name         修改小红书 PWA 标题栏颜色
// @version      0.1
// @description  修改小红书 PWA 标题栏颜色为 #0A0A0A
// @author       hiisme
// @match        https://www.xiaohongshu.com/*
// @grant        GM_addStyle
// @namespace https://greasyfork.org/users/217852
// ==/UserScript==

(function() {
    'use strict';

    // 修改标题栏颜色的 CSS 样式
    const style = `
        /* 修改标题栏颜色为 #0A0A0A */
        @media (display-mode: standalone) {
            /* 修改 PWA 独立显示模式下的标题栏颜色 */
            header {
                background-color: #0A0A0A !important;
            }
        }
    `;

    // 将样式添加到页面
    GM_addStyle(style);

    // 监听页面变化
    const observer = new MutationObserver(() => {
        // 重新设置标题栏颜色
        const changePwaTitleBarColor = () => {
            const metaThemeColor = document.querySelector('meta[name="theme-color"]');
            if (metaThemeColor) {
                metaThemeColor.setAttribute('content', '#0A0A0A');
            } else {
                const newMetaTag = document.createElement('meta');
                newMetaTag.setAttribute('name', 'theme-color');
                newMetaTag.setAttribute('content', '#0A0A0A');
                document.head.appendChild(newMetaTag);
            }
        };

        // 重新调用修改标题栏颜色的函数
        changePwaTitleBarColor();
    });

    // 配置并启动 MutationObserver
    const config = { attributes: true, childList: true, subtree: true };
    observer.observe(document.body, config);
})();