Dark Mode Toggle

Toggle dark mode on any website.
Wrap lines
// ==UserScript==
// @name         Dark Mode Toggle
// @namespace    http://violentmonkey.net/
// @version      1.3
// @description  Toggle dark mode on any website.
// @match        *://*/*
// @user         InariOkami
// @icon         https://static.thenounproject.com/png/3359489-200.png
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    function applyDarkMode() {
        GM_addStyle(`
            /* General styles */
            body {
                background-color: #121212;
                color: #e0e0e0;
            }
            a {
                color: #bb86fc;
            }
            /* Headers and footers */
            header, footer, .navbar, .sidebar, .card, .modal, .dropdown, .banner, .container {
                background-color: #1e1e1e !important;
            }
            /* Forms and inputs */
            .input, .textarea, .button, .form-control, .select, .checkbox, .radio {
                background-color: #333 !important;
                color: #e0e0e0 !important;
                border-color: #444 !important;
            }
            .input:focus, .textarea:focus, .button:focus, .form-control:focus, .select:focus {
                border-color: #bb86fc !important;
                box-shadow: 0 0 0 1px #bb86fc !important;
            }
            /* Code blocks */
            .code, pre, .terminal {
                background-color: #2d2d2d;
                color: #e0e0e0;
                border: 1px solid #444;
            }
            /* Muted and light text */
            .text-muted, .text-light, .placeholder {
                color: #b0b0b0 !important;
            }
            /* Light backgrounds */
            .bg-light, .btn-light {
                background-color: #1e1e1e !important;
                color: #e0e0e0 !important;
            }
            .bg-white, .text-white {
                background-color: #333 !important;
                color: #e0e0e0 !important;
            }
            /* Alerts and notifications */
            .alert, .notification, .toast {
                background-color: #2d2d2d !important;
                color: #e0e0e0 !important;
            }
            /* Tables */
            table, th, td {
                background-color: #1e1e1e !important;
                color: #e0e0e0 !important;
                border: 1px solid #444 !important;
            }
            /* Links and buttons */
            button, .link, .nav-link {
                background-color: #333 !important;
                color: #e0e0e0 !important;
                border-color: #444 !important;
            }
            button:hover, .link:hover, .nav-link:hover {
                background-color: #444 !important;
            }
            /* Scrollbars */
            ::-webkit-scrollbar {
                width: 12px;
            }
            ::-webkit-scrollbar-thumb {
                background: #333;
                border-radius: 6px;
            }
            ::-webkit-scrollbar-track {
                background: #121212;
            }
        `);
    }

    function removeDarkMode() {
        GM_addStyle(`
            /* General styles */
            body {
                background-color: #ffffff;
                color: #000000;
            }
            a {
                color: #0000ee;
            }
            /* Headers and footers */
            header, footer, .navbar, .sidebar, .card, .modal, .dropdown, .banner, .container {
                background-color: #f0f0f0 !important;
            }
            /* Forms and inputs */
            .input, .textarea, .button, .form-control, .select, .checkbox, .radio {
                background-color: #ffffff !important;
                color: #000000 !important;
                border-color: #cccccc !important;
            }
            .input:focus, .textarea:focus, .button:focus, .form-control:focus, .select:focus {
                border-color: #0000ee !important;
                box-shadow: 0 0 0 1px #0000ee !important;
            }
            /* Code blocks */
            .code, pre, .terminal {
                background-color: #f5f5f5;
                color: #000000;
                border: 1px solid #cccccc;
            }
            /* Muted and light text */
            .text-muted, .text-light, .placeholder {
                color: #6c757d !important;
            }
            /* Light backgrounds */
            .bg-light, .btn-light {
                background-color: #f8f9fa !important;
                color: #000000 !important;
            }
            .bg-white, .text-white {
                background-color: #ffffff !important;
                color: #000000 !important;
            }
            /* Alerts and notifications */
            .alert, .notification, .toast {
                background-color: #e2e3e5 !important;
                color: #000000 !important;
            }
            /* Tables */
            table, th, td {
                background-color: #f0f0f0 !important;
                color: #000000 !important;
                border: 1px solid #cccccc !important;
            }
            /* Links and buttons */
            button, .link, .nav-link {
                background-color: #ffffff !important;
                color: #000000 !important;
                border-color: #cccccc !important;
            }
            button:hover, .link:hover, .nav-link:hover {
                background-color: #e0e0e0 !important;
            }
            /* Scrollbars */
            ::-webkit-scrollbar {
                width: 12px;
            }
            ::-webkit-scrollbar-thumb {
                background: #cccccc;
                border-radius: 6px;
            }
            ::-webkit-scrollbar-track {
                background: #ffffff;
            }
        `);
    }

    function toggleDarkMode() {
        const darkMode = !GM_getValue('darkMode', false);
        GM_setValue('darkMode', darkMode);
        if (darkMode) {
            applyDarkMode();
        } else {
            removeDarkMode();
        }
    }

    if (GM_getValue('darkMode', false)) {
        applyDarkMode();
    }

    GM_registerMenuCommand('Toggle Dark Mode', toggleDarkMode, 'd');
})();
欢迎访问Greasy Fork镜像
