Automatic Material Dark-Mode for YouTube

A low-tech solution to a high-tech problem! Automatically clicks YouTube's "Dark Mode" button if dark mode isn't already active.
目前为 2017-09-05 提交的版本。查看最新版本。
安装此脚本 ?
提问、发表评价，或者举报这个脚本。
Wrap lines
// ==UserScript==
// @name         Automatic Material Dark-Mode for YouTube
// @namespace    SteveJobzniak
// @version      1.1
// @description  A low-tech solution to a high-tech problem! Automatically clicks YouTube's "Dark Mode" button if dark mode isn't already active.
// @author       SteveJobzniak
// @match        *://www.youtube.com/*
// @exclude      *://www.youtube.com/tv*
// @exclude      *://www.youtube.com/embed/*
// @run-at       document-end
// @grant        none
// @noframes
// ==/UserScript==

(function() {
    'use strict';

    function enableDark() {
        // Wait a moment so that the whole page menu is loaded and the "dark mode state" is updated...
        var attempt = 0, maxAttempts = 8, waitDelay = 250; // 8*250ms = Max 2 seconds of retries.
        var menuWaitTimer = setInterval( function() {
            // We must find the "settings" menu, otherwise YouTube hasn't fully loaded yet...
            var menuButtons = document.querySelectorAll( 'yt-icon.style-scope.ytd-topbar-menu-button-renderer' );

            // If we've reached max attempts or found success, we must now stop the interval timer.
            if( ++attempt >= maxAttempts || menuButtons.length === 2 ) {
                clearInterval( menuWaitTimer );
            }

            // Failed to find the menu bar. Skip this attempt...
            if( menuButtons.length !== 2 ) {
                return;
            }

            // Check the dark mode state "flag" and only process if dark mode isn't already active.
            if( document.body.getAttribute( 'dark' ) !== 'true' ) {
                // We MUST open the "settings" menu, otherwise nothing will react to the "toggle dark mode" event!
                menuButtons[1].click(); // Click the 2nd menu button.

                // Wait a moment for the settings-menu to open up after clicking...
                setTimeout( function() {
                    // Next, open the "toggle dark mode" settings sub-page.
                    var subButtons = document.querySelectorAll( 'div#label.style-scope.ytd-toggle-theme-compact-link-renderer' );
                    if( subButtons.length === 1 ) {
                        subButtons[0].click(); // Click the "dark mode" sub-page button.

                        // Wait a moment for the sub-page to switch...
                        setTimeout( function() {
                            // Get a reference to the "toggle dark mode" settings sub-page. This only works if we opened the "dark mode" sub-page.
                            var toggleMenuElem = document.querySelectorAll( 'ytd-toggle-item-renderer.style-scope.ytd-multi-page-menu-renderer' );
                            toggleMenuElem = (toggleMenuElem.length === 1 ? toggleMenuElem[0] : undefined); // Always missing unless we visit the page...

                            if( toggleMenuElem ) {
                                // Get a reference to the "activate dark mode" button.
                                var darkModeButton = toggleMenuElem.querySelectorAll( 'paper-toggle-button.style-scope.ytd-toggle-item-renderer' );
                                darkModeButton = (darkModeButton.length === 1 ? darkModeButton[0] : undefined);

                                // Now simply click the button to enable dark mode.
                                darkModeButton.click();
                            }

                            // Alternative method, which switches using an event instead of clicking the button...
                            // I decided to disable this method, since it relies on intricate internal details...
                            // and requires the menu to be open to work anyway, so we may as well just click it...
                            /*
                                var ytDebugMenu = document.querySelectorAll('ytd-debug-menu');
                                ytDebugMenu = (ytDebugMenu.length === 1 ? ytDebugMenu[0] : undefined);
                                if( ytDebugMenu ) {
                                    ytDebugMenu.fire(
                                        'yt-action',
                                        {
                                            actionName:'yt-signal-action-toggle-dark-theme-on',
                                            optionalAction:false,
                                            args:[
                                                {signalAction:{signal:'TOGGLE_DARK_THEME_ON'}},
                                                toggleMenuElem,
                                                undefined
                                            ],
                                            returnValue: []
                                        },
                                        {}
                                    );
                                }
                                */
                        }, 250 ); // Delay to wait for the dark mode settings subpage to open.
                    }
                }, 500 ); // Delay to wait for the settings menu to fully open.
            }
        }, waitDelay ); // Check-interval after page load to ensure the deferred menu topbar and dark mode state are fully loaded.
    }

    if( document.readyState === 'complete' ) {
        enableDark();
    } else {
        document.addEventListener( 'readystatechange', function( evt ) {
            if( document.readyState === 'complete' ) {
                enableDark();
            }
        } );
    }
})();
欢迎访问Greasy Fork镜像
