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 });
})();