☰

Floatplane System Theme Sync

Sync Floatplane theme with system theme based on system changes and page load

当前为 2025-01-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Floatplane System Theme Sync
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Sync Floatplane theme with system theme based on system changes and page load
  6. // @author       EthanBezz
  7. // @match        https://*.floatplane.com/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (() => {
  13.     'use strict';
  14.  
  15.     const systemThemeQuery = window.matchMedia('(prefers-color-scheme: dark');
  16.     const isSystemDark = () => systemThemeQuery.matches;
  17.     const getFloatplaneTheme = () => JSON.parse(localStorage.getItem('fp:theme-preferred'));
  18.     const isThemeMismatched = () => isSystemDark() !== (getFloatplaneTheme() === 'dark');
  19.     const getThemeToggle = () =>
  20.         [...document.querySelectorAll('a._dropdownItem_ouby8_1')]
  21.             .find(menuItem => menuItem.textContent.includes('Mode'));
  22.  
  23.     new MutationObserver((_, observer) => {
  24.         const themeToggle = getThemeToggle();
  25.         if (themeToggle) {
  26.             isThemeMismatched() && themeToggle.click();
  27.             systemThemeQuery.addEventListener('change', () => isThemeMismatched() && getThemeToggle()?.click());
  28.             observer.disconnect();
  29.         }
  30.     }).observe(document, { subtree: true, childList: true });
  31. })();