☰

Auto Light/Dark PWA Titlebar

Changes titlebar of PWA to be light or dark

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey 或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！） 

// ==UserScript==
// @name         Auto Light/Dark PWA Titlebar
// @version      1.2
// @description  Changes titlebar of PWA to be light or dark
// @author       https://github.com/ruukulada
// @namespace    https://github.com/ruukulada
// @match        *://*/*
// @license      MIT
// @grant        none
// @run-at       document-start
// ==/UserScript==

function toggleTheme(isDarkMode) {
  'use strict';
  var meta = document.createElement("meta");
  meta.name = "theme-color";
  const mode = isDarkMode ? "#000000" : "#FFFFFF";
  meta.content = mode;
  document.getElementsByTagName("head")[0].prepend(meta);
}
const darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
toggleTheme(darkMedia.matches);
darkMedia.addEventListener('change', e => {
  toggleTheme(e.matches);
});