帽子云控制台深浅色随系统切换

给帽子云控制台的网页添加深浅色跟随系统切换的功能

// ==UserScript==
// @name         帽子云控制台深浅色随系统切换
// @namespace    https://dash.maoziyun.com/*
// @version      0.1
// @description  给帽子云控制台的网页添加深浅色跟随系统切换的功能
// @author       xxnuo
// @match        https://dash.maoziyun.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 创建反色样式
    const style = document.createElement('style');
    style.textContent = `
        @media (prefers-color-scheme: light) {
            html {
                filter: invert(1) hue-rotate(180deg);
            }
            img, video, canvas {
                filter: invert(1) hue-rotate(180deg);
            }
        }
    `;

    // 添加样式到页面
    document.head.appendChild(style);

    // 监听系统主题变化
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
        style.disabled = e.matches;
    });

    // 初始化时检查是否为深色模式
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        style.disabled = true;
    }
})();