☰

Simple Dark Mode Toggle

Adds a toggle button to enable/disable dark mode on any website.

// ==UserScript==
// @name         Simple Dark Mode Toggle
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a toggle button to enable/disable dark mode on any website.
// @author       Agnibin
// @match        *://*/*
// @license      MIT
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    // --- Configuration ---
    // You can customize these values
    const TOGGLE_BUTTON_ID = 'dark-mode-toggle-button';
    const BODY_DARK_CLASS = 'dark-mode-active'; // Class added to <body> when dark mode is on
    const STORAGE_KEY = 'darkModeEnabled'; // Key for storing preference

    // --- Injected CSS for Dark Mode ---
    // This CSS will be applied when dark mode is active.
    // You can customize these styles to fit your needs, but these provide a basic dark theme.
    const darkThemeCSS = `
        body.${BODY_DARK_CLASS} {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        body.${BODY_DARK_CLASS} h1,
        body.${BODY_DARK_CLASS} h2,
        body.${BODY_DARK_CLASS} h3,
        body.${BODY_DARK_CLASS} h4,
        body.${BODY_DARK_CLASS} h5,
        body.${BODY_DARK_CLASS} h6 {
            color: #f0f0f0 !important;
        }

        body.${BODY_DARK_CLASS} a {
            color: #8ab4f8 !important; /* Lighter blue for links */
        }

        body.${BODY_DARK_CLASS} p,
        body.${BODY_DARK_CLASS} span,
        body.${BODY_DARK_CLASS} div,
        body.${BODY_DARK_CLASS} li,
        body.${BODY_DARK_CLASS} td,
        body.${BODY_DARK_CLASS} th {
            color: #c0c0c0 !important;
        }

        body.${BODY_DARK_CLASS} input,
        body.${BODY_DARK_CLASS} textarea,
        body.${BODY_DARK_CLASS} select {
            background-color: #333 !important;
            color: #e0e0e0 !important;
            border-color: #555 !important;
        }

        body.${BODY_DARK_CLASS} button {
            background-color: #444 !important;
            color: #e0e0e0 !important;
            border-color: #666 !important;
        }

        /* Generic background/text color for elements that might not inherit */
        body.${BODY_DARK_CLASS} * {
            background-color: inherit !important; /* Allow most elements to inherit background */
            color: inherit !important; /* Allow most elements to inherit text color */
        }
    `;

    // --- Toggle Button CSS ---
    const toggleButtonCSS = `
        #${TOGGLE_BUTTON_ID} {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #28a745; /* Green color for the button */
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            z-index: 99999; /* Ensure it's above other elements */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease, transform 0.2s ease;
            font-family: 'Inter', sans-serif; /* Using Inter font */
        }

        #${TOGGLE_BUTTON_ID}:hover {
            background-color: #218838; /* Darker green on hover */
            transform: translateY(-2px); /* Slight lift effect */
        }

        #${TOGGLE_BUTTON_ID}:active {
            background-color: #1e7e34; /* Even darker green on click */
            transform: translateY(0);
        }

        /* Style for the button when dark mode is ON */
        body.${BODY_DARK_CLASS} #${TOGGLE_BUTTON_ID} {
            background-color: #dc3545; /* Red color when dark mode is active */
        }

        body.${BODY_DARK_CLASS} #${TOGGLE_BUTTON_ID}:hover {
            background-color: #c82333; /* Darker red on hover */
        }
    `;

    // --- Function to apply/remove dark mode ---
    function applyDarkMode(enable) {
        if (enable) {
            document.body.classList.add(BODY_DARK_CLASS);
            toggleButton.textContent = 'Disable Dark Mode';
        } else {
            document.body.classList.remove(BODY_DARK_CLASS);
            toggleButton.textContent = 'Enable Dark Mode';
        }
        // Save the preference
        GM_setValue(STORAGE_KEY, enable);
    }

    // --- Create and append the toggle button ---
    const toggleButton = document.createElement('button');
    toggleButton.id = TOGGLE_BUTTON_ID;
    document.body.appendChild(toggleButton);

    // --- Add event listener to the button ---
    toggleButton.addEventListener('click', () => {
        const currentMode = document.body.clas_sList.contains(BODYDARK_CLASS);
        applyDarkMode(!currentMode); // Toggle the mode
    });

    // --- Apply initial styles ---
    GM_addStyle(darkThemeCSS);
    GM_addStyle(toggleButtonCSS);

    // --- Load preference on page load ---
    // Check if dark mode was enabled in the previous session
    const savedDarkModeState = GM_getValue(STORAGE_KEY, false); // Default to false (off)
    applyDarkMode(savedDarkModeState);

})();