A low-tech solution to a high-tech problem! Automatically clicks YouTube's "Dark Mode" button if dark mode isn't already active.
目前为
// ==UserScript==
// @name Automatic Material Dark-Mode for YouTube
// @namespace SteveJobzniak
// @version 1.0
// @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...
setTimeout( function() {
// Check the dark mode state 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!
var menuButtons = document.querySelectorAll('yt-icon.style-scope.ytd-topbar-menu-button-renderer');
if( menuButtons.length === 2 ) {
menuButtons[1].click(); // Click the 2nd menu button.
// Wait a moment for the settings-menu to open up...
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.
}
}
}, 500 ); // Delay after page load to ensure the deferred menu topbar and dark mode state is fully loaded.
}
if( document.readyState === 'complete' ) {
enableDark();
} else {
document.addEventListener( 'readystatechange', function( evt ) {
if( document.readyState === 'complete' ) {
enableDark();
}
} );
}
})();