PWA 自动深色标题栏

根据系统设置自动设置PWA深色标题栏

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name               PWA Auto Dark Titlebar
// @name:zh-CN         PWA 自动深色标题栏
// @namespace          http://tampermonkey.net/
// @version            0.1
// @description        Auto apply dark titlebar for PWA follow system setting
// @description:zh-CN  根据系统设置自动设置PWA深色标题栏
// @author             TGSAN
// @match              *://*/*
// @grant              none
// ==/UserScript==

(function() {
    'use strict';

    let titlebar = document.createElement("meta");
    titlebar.name = "theme-color";
    document.head.appendChild(titlebar);
    let listeners = {
        dark:(mediaQueryList) => {
            if(mediaQueryList.matches){
                titlebar.content = "#202020";
            }
        },
        light:(mediaQueryList) => {
            if(mediaQueryList.matches){
                titlebar.content = "";
            }
        }
    }
    if(window.matchMedia('(prefers-color-scheme: dark)').matches) {
        titlebar.content = "#202020";
    } else if(window.matchMedia('(prefers-color-scheme: light)').matches) {
        titlebar.content = "";
    }

    window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)
    window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
})();