Toggle between dark and light mode on any website with a button on the center right of the screen that auto hides.
Sure! Here’s an explanation of the provided code written in Markdown format:
This user script allows you to toggle between dark and light modes on any website using a button that appears on the center-right of the screen. The button slides out when you hover over it and can toggle the page's color inversion to simulate dark mode.
Slide-out Button:
☼) on the center-right of the screen.Dark/Light Mode Toggle:
filter: invert(1) property.localStorage to remember the selected mode (dark or light) so that it persists across page reloads.UserScript Settings:
@match *://*/*).The core of the script starts here:
(function() {
'use strict';
The script uses an immediately invoked function expression (IIFE) to ensure that all variables and functions are scoped locally and do not interfere with the global page environment.
document.addEventListener('DOMContentLoaded', function() {
This ensures the script only runs after the page's DOM is fully loaded, so the script does not interact with elements that may not yet be available.
const toggleButton = document.createElement('button');
toggleButton.innerHTML = '☼'; // Start with an arrow
toggleButton.style.position = 'fixed';
toggleButton.style.top = '50%'; // Vertically center the button
toggleButton.style.transform = 'translateY(-50%)'; // Adjust for perfect centering
toggleButton.style.right = '-12px'; // Initially hidden to the right
toggleButton.style.width = '50px'; // Small width to show just the arrow
toggleButton.style.height = '50px';
toggleButton.style.zIndex = '1000';
toggleButton.style.backgroundColor = 'rgba(50, 50, 50, 0.8)';
toggleButton.style.color = '#ffffff';
toggleButton.style.border = 'none';
toggleButton.style.borderRadius = '5px 0 0 5px'; // Rounded edge on the left side
toggleButton.style.transition = 'right 0.3s ease, width 0.3s ease'; // Smooth transitions for both right and width
toggleButton.style.overflow = 'hidden'; // Hide text overflow
toggleButton.style.whiteSpace = 'nowrap'; // Prevent text wrapping
toggleButton.style.textAlign = 'center';
This block creates the button element and sets its initial style:
right: -12px) and expands when hovered over.rgba(50, 50, 50, 0.8)) and white text, and smooth transitions are applied for sliding in and expanding. document.body.appendChild(toggleButton);
This appends the newly created button to the page.
let inverted = localStorage.getItem('invertedColors') === 'true';
setInvertedMode(inverted);
This retrieves the user's last dark/light mode setting from localStorage and applies it when the page loads.
// Hover effect to slide out the button and reveal text
toggleButton.addEventListener('mouseenter', () => {
toggleButton.style.right = '0'; // Slide out
toggleButton.style.width = '150px'; // Expand to show text
toggleButton.innerHTML = '☼ Invert Colors'; // Add text next to the arrow
});
toggleButton.addEventListener('mouseleave', () => {
toggleButton.style.right = '-12px'; // Slide back in
toggleButton.style.width = '50px'; // Shrink back to arrow only
toggleButton.innerHTML = '☼'; // Show only the arrow
});
toggleButton.addEventListener('click', () => {
inverted = !inverted;
setInvertedMode(inverted);
localStorage.setItem('invertedColors', inverted);
});
When the button is clicked, the inverted state is toggled, and the setInvertedMode function is called to apply the corresponding mode. The new state is saved to localStorage for persistence across page reloads.
function setInvertedMode(isInverted) {
if (isInverted) {
document.documentElement.style.filter = 'invert(1)';
toggleButton.style.backgroundColor = 'rgba(200, 200, 200, 0.8)'; // Muted light color
toggleButton.style.color = '#000000'; // Dark text
} else {
document.documentElement.style.filter = 'invert(0)';
toggleButton.style.backgroundColor = 'rgba(50, 50, 50, 0.8)'; // Muted dark color
toggleButton.style.color = '#ffffff'; // Light text
}
}
This function toggles the color inversion for the entire webpage:
isInverted = true), the page's colors are inverted using filter: invert(1).isInverted = false), the page returns to normal colors.This script is a simple but effective tool for toggling dark and light modes on any website. The button is unobtrusive, auto-hiding when not in use, and the mode persists across page reloads by saving the user's preference in localStorage.