YouTube Dark Mode Toggle Fixed のソースコード

YouTube Dark Mode Toggle Fixed

Adds a working bottom-left dark/light toggle for YouTube
右端で折り返す
// ==UserScript==
// @name         YouTube Dark Mode Toggle Fixed
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Adds a working bottom-left dark/light toggle for YouTube
// @author       You
// @match        https://www.youtube.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const DARK_STYLE_ID = 'yt-darkmode-style';

    function addToggleButton() {
        if (document.querySelector('#yt-darkmode-toggle')) return; // already added

        const toggle = document.createElement('button');
        toggle.id = 'yt-darkmode-toggle';
        toggle.innerText = 'Toggle Dark Mode';
        Object.assign(toggle.style, {
            position: 'fixed',
            bottom: '10px',
            left: '10px',
            zIndex: '9999',
            padding: '10px',
            backgroundColor: '#000',
            color: '#fff',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            fontSize: '14px'
        });
        document.body.appendChild(toggle);

        let darkMode = false;

        toggle.addEventListener('click', () => {
            darkMode = !darkMode;

            if (darkMode) {
                // Add a style element for dark mode
                const style = document.createElement('style');
                style.id = DARK_STYLE_ID;
                style.innerHTML = `
                    ytd-app, ytd-page-manager, #content, #primary, #secondary {
                        background-color: #111 !important;
                        color: #fff !important;
                    }
                    yt-formatted-string, a, h1, h2, h3, h4, h5, h6, span, div {
                        color: #fff !important;
                    }
                    ytd-video-renderer, ytd-rich-item-renderer, ytd-rich-grid-media {
                        background-color: #222 !important;
                    }
                `;
                document.head.appendChild(style);
            } else {
                const style = document.getElementById(DARK_STYLE_ID);
                if (style) style.remove();
            }
        });
    }

    // Use MutationObserver to wait for YouTube SPA navigation
    const observer = new MutationObserver(() => {
        if (document.body) {
            addToggleButton();
            observer.disconnect();
        }
    });

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

})();