页面亮暗主题切换

Greasy Fork is available in English.
页面亮暗主题切换

Toggle light/dark mode across all sites with Ctrl+I (double press).
当前为 2024-04-02 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         页面亮暗主题切换
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  Toggle light/dark mode across all sites with Ctrl+I (double press).
// @author       Movelocity
// @match        *://*/*
// @grant        none
// @run-at       document-start
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  const sitesAndRules = {
    'https://www.coze.com/space': [
      `.code-block-element_93cd4 {
        filter: invert(100%) brightness(1) contrast(1);
      }
      .semi-avatar{
        filter: invert(100%) brightness(1) contrast(1);
      }
      `
      // Add more rules as needed
    ]
    // You can add more sites and their rules here
  };

  const top_elem = document.documentElement;
  let global_css = 'invert(90%) brightness(1.8) contrast(1.2)';
  let site_css = "";
  let style_elem = document.createElement('style');

  const currentUrl = window.location.href;
  // Iterate over the sites in the map
  for (const site in sitesAndRules) {
    if (currentUrl.startsWith(site)) {
      // 匹配站点，使用对应的 css 集合
      site_css = sitesAndRules[site];
      break; // No need to check other sites if a match is found
    }
  }

  function applyFilter(){
    const inverted = localStorage.getItem('tm-inverted') === 'true';
    if (inverted) {
      style_elem.innerHTML = site_css;
      top_elem.style.filter = global_css;
    } else {
      style_elem.innerHTML = '';
      top_elem.style.filter = '';
    }
  }

  // Function to toggle the inversion
  function toggleInversion() {
    const inverted = localStorage.getItem('tm-inverted') === 'true';
    if (inverted) {
      localStorage.setItem('tm-inverted', 'false');
    } else {
      localStorage.setItem('tm-inverted', 'true');
    }
    applyFilter();
  }

  // 实现按键双击
  let lastPressTime = 0;
  document.addEventListener('keydown', function (event) {
    const currentTime = new Date().getTime();
    if (event.ctrlKey && event.key === 'i') {
      if (currentTime - lastPressTime < 400) { // 400 ms for double press
        toggleInversion();
      }
      lastPressTime = currentTime;
    }
  });

  // Apply the inversion filter if it was previously set
  setTimeout(() => {
    document.head.appendChild(style_elem);
    applyFilter();
  }, 200);
})();