Enable dark mode with a toggle button
// ==UserScript==
// @name Dark Mode Toggle (Mobile Manual)
// @version 0.0.4
// @description Enable dark mode with a toggle button
// @namespace https://greasyfork.org/en/users/28298
// @author https://greasyfork.org/en/users/28298
// @homepage https://greasyfork.org/en/scripts/523876
// @license MIT
// @match *://*/*
// @grant none
// ==/UserScript==
// original author: Michael Wang https://greasyfork.org/en/scripts/472251-dark-mode/code
// with help of claude ai
(function () {
// Create style element for dark mode
const darkStyle = document.createElement('style');
darkStyle.textContent = `
html {
filter: invert(1) hue-rotate(180deg) contrast(0.8);
}
/** reverse filter for media elements */
img, video, picture, canvas, iframe, embed {
filter: invert(1) hue-rotate(180deg);
}
`;
// Initialize based on page's current state
let darkMode = false; // Start with no filter
const pageIsDark = document.documentElement.classList.contains('dark');
// Create toggle button
const button = document.createElement('button');
button.innerHTML = pageIsDark ? '☼' : '☽';
button.style.position = 'fixed';
button.style.bottom = '10px';
button.style.left = '15px';
button.style.zIndex = '1000';
button.style.background = 'none';
button.style.border = 'none';
button.style.fontSize = '24px';
button.style.cursor = 'pointer';
button.style.color = 'inherit';
// Toggle dark mode on button click
button.addEventListener('click', () => {
darkMode = !darkMode;
if (darkMode) {
document.head.appendChild(darkStyle);
button.innerHTML = pageIsDark ? '☽' : '☼';
} else {
document.head.removeChild(darkStyle);
button.innerHTML = pageIsDark ? '☼' : '☽';
}
});
document.body.appendChild(button);
})();