Investopedia Dark Mode

Dark mode for Investopedia.com
换行
// ==UserScript==
// @name         Investopedia Dark Mode
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Dark mode for Investopedia.com
// @author       You
// @match        https://www.investopedia.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create and inject dark mode CSS
    const darkModeCSS = `
        /* Global dark mode styles */
        * {
            scrollbar-width: thin;
            scrollbar-color: #555 #2a2a2a;
        }

        *::-webkit-scrollbar {
            width: 8px;
        }

        *::-webkit-scrollbar-track {
            background: #2a2a2a;
        }

        *::-webkit-scrollbar-thumb {
            background-color: #555;
            border-radius: 4px;
        }

        /* Main background and text */
        body,
        html {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        /* Headers */
        h1, h2, h3, h4, h5, h6 {
            color: #ffffff !important;
        }

        /* Links */
        a {
            color: #4a9eff !important;
        }

        a:hover {
            color: #66b3ff !important;
        }

        a:visited {
            color: #9a7bff !important;
        }

        /* Navigation and header */
        .header,
        .navbar,
        .nav,
        nav,
        [class*="header"],
        [class*="nav"] {
            background-color: #2d2d2d !important;
            border-color: #404040 !important;
        }

        /* Main content areas */
        .main,
        .content,
        .article,
        [class*="content"],
        [class*="article"],
        [class*="main"] {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        /* Sidebars and secondary content */
        .sidebar,
        .aside,
        aside,
        [class*="sidebar"],
        [class*="aside"] {
            background-color: #242424 !important;
            color: #e0e0e0 !important;
        }

        /* Cards and containers */
        .card,
        .box,
        .container,
        .panel,
        [class*="card"],
        [class*="box"],
        [class*="panel"] {
            background-color: #242424 !important;
            border-color: #404040 !important;
            color: #e0e0e0 !important;
        }

        /* Forms and inputs */
        input,
        textarea,
        select,
        button {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
            border-color: #404040 !important;
        }

        input:focus,
        textarea:focus,
        select:focus {
            border-color: #4a9eff !important;
            box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2) !important;
        }

        button:hover {
            background-color: #3a3a3a !important;
        }

        /* Tables */
        table {
            background-color: #242424 !important;
            color: #e0e0e0 !important;
        }

        th {
            background-color: #2d2d2d !important;
            color: #ffffff !important;
            border-color: #404040 !important;
        }

        td {
            background-color: #242424 !important;
            color: #e0e0e0 !important;
            border-color: #404040 !important;
        }

        tr:nth-child(even) {
            background-color: #2a2a2a !important;
        }

        /* Quotes and blockquotes */
        blockquote,
        .quote,
        [class*="quote"] {
            background-color: #2d2d2d !important;
            border-left-color: #4a9eff !important;
            color: #e0e0e0 !important;
        }

        /* Code blocks */
        code,
        pre,
        .code,
        [class*="code"] {
            background-color: #1e1e1e !important;
            color: #f8f8f2 !important;
            border-color: #404040 !important;
        }

        /* Alerts and notifications */
        .alert,
        .notification,
        .message,
        [class*="alert"],
        [class*="notification"],
        [class*="message"] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
            border-color: #404040 !important;
        }

        /* Specific Investopedia elements */
        .mntl-sc-block,
        .comp,
        .article-content,
        .article-body {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        /* Footer */
        .footer,
        footer,
        [class*="footer"] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
            border-color: #404040 !important;
        }

        /* Dropdown menus */
        .dropdown-menu,
        .menu,
        [class*="dropdown"],
        [class*="menu"] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
            border-color: #404040 !important;
        }

        /* Tooltips */
        .tooltip,
        [class*="tooltip"] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        /* Images - add subtle border for better visibility */
        img {
            border: 1px solid #404040;
            border-radius: 4px;
        }

        /* Override any white backgrounds */
        [style*="background-color: white"],
        [style*="background-color: #fff"],
        [style*="background-color: #ffffff"],
        [style*="background: white"],
        [style*="background: #fff"],
        [style*="background: #ffffff"] {
            background-color: #242424 !important;
        }

        /* Override any black text on light backgrounds */
        [style*="color: black"],
        [style*="color: #000"],
        [style*="color: #000000"] {
            color: #e0e0e0 !important;
        }

        /* Special handling for specific Investopedia components */
        .mntl-breadcrumbs {
            background-color: #2d2d2d !important;
        }

        .mntl-sc-block-adslot {
            background-color: #2d2d2d !important;
        }

        /* Search box styling */
        .search-form input {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }
    `;

    // Create style element and inject CSS
    const style = document.createElement('style');
    style.textContent = darkModeCSS;
    document.head.appendChild(style);

    // Function to apply dark mode to dynamically loaded content
    function applyDarkModeToNewElements() {
        // This will handle any new elements that are added after page load
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1) { // Element node
                        // Force dark styling on new elements if needed
                        if (node.style && node.style.backgroundColor === 'white') {
                            node.style.backgroundColor = '#242424';
                        }
                        if (node.style && node.style.color === 'black') {
                            node.style.color = '#e0e0e0';
                        }
                    }
                });
            });
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    // Wait for DOM to be fully loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyDarkModeToNewElements);
    } else {
        applyDarkModeToNewElements();
    }

    // Apply additional fixes after a short delay to catch any delayed loading
    setTimeout(function() {
        // Force any remaining white backgrounds to dark
        const whiteElements = document.querySelectorAll('[style*="background-color: white"], [style*="background-color: #fff"], [style*="background-color: #ffffff"]');
        whiteElements.forEach(el => {
            el.style.backgroundColor = '#242424';
        });

        // Force any remaining black text to light
        const blackTextElements = document.querySelectorAll('[style*="color: black"], [style*="color: #000"], [style*="color: #000000"]');
        blackTextElements.forEach(el => {
            el.style.color = '#e0e0e0';
        });
    }, 1000);

})();
欢迎访问Greasy Fork镜像
