Sure! Here’s an explanation of the provided code written in Markdown format:
Dark/Light Mode Toggle UserScript
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.
Features:
Slide-out Button:
- Initially, the button appears as a small arrow (
☼) on the center-right of the screen.
- When hovered over, the button slides out and expands, showing the text "☼ Invert Colors."
- When the mouse moves away, the button shrinks back and slides off the screen, leaving only the arrow visible.
Dark/Light Mode Toggle:
- Clicking the button inverts the website's colors (from light to dark and vice versa).
- The inversion effect is achieved using CSS's
filter: invert(1) property.
- The script uses
localStorage to remember the selected mode (dark or light) so that it persists across page reloads.
UserScript Settings:
- The script is set to work on all websites (
@match *://*/*).
- It includes metadata for version control and automatic updates, allowing users to install or update the script from a hosting platform like Greasy Fork.
Main Functionality
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.
DOMContentLoaded Event Listener
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.
Button Creation and Styling
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:
- The button is fixed in position and centered vertically along the right side of the screen.
- It starts with only an arrow (☼) visible.
- The button is initially placed slightly off-screen (
right: -12px) and expands when hovered over.
- The button is styled with a dark background (
rgba(50, 50, 50, 0.8)) and white text, and smooth transitions are applied for sliding in and expanding.
Append Button to Body
document.body.appendChild(toggleButton);
This appends the newly created button to the page.
Load Inverted Mode from LocalStorage
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.
Button Hover Event Listeners
// 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
});
- mouseenter: When the user hovers over the button, it slides out fully and expands in width to reveal the text "☼ Invert Colors".
- mouseleave: When the user moves the mouse away, the button shrinks back to its original state (just the ☼ symbol) and slides back to the right.
Button Click Event Listener
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.
Set Inverted Mode Function
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:
- If dark mode is enabled (
isInverted = true), the page's colors are inverted using filter: invert(1).
- The button's background and text colors also change to reflect the current mode.
- If dark mode is disabled (
isInverted = false), the page returns to normal colors.
Conclusion
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.
