☰

Dark/Light Mode Toggle

Toggle between dark and light mode on any website with a button on the center right of the screen that auto hides.

  1. // ==UserScript==
  2. // @name         Dark/Light Mode Toggle
  3. // @namespace    https://azastudio.net
  4. // @version      1.2
  5. // @description  Toggle between dark and light mode on any website with a button on the center right of the screen that auto hides.
  6. // @author       Nate Thompson
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     document.addEventListener('DOMContentLoaded', function() {
  16.         const toggleButton = document.createElement('button');
  17.         toggleButton.innerHTML = '☼'; // Start with an arrow
  18.         toggleButton.style.position = 'fixed';
  19.         toggleButton.style.top = '50%'; // Vertically center the button
  20.         toggleButton.style.transform = 'translateY(-50%)'; // Adjust for perfect centering
  21.         toggleButton.style.right = '-12px'; // Initially hidden to the right
  22.         toggleButton.style.width = '50px'; // Small width to show just the arrow
  23.         toggleButton.style.height = '50px';
  24.         toggleButton.style.zIndex = '1000';
  25.         toggleButton.style.backgroundColor = 'rgba(50, 50, 50, 0.8)';
  26.         toggleButton.style.color = '#ffffff';
  27.         toggleButton.style.border = 'none';
  28.         toggleButton.style.borderRadius = '5px 0 0 5px'; // Rounded edge on the left side
  29.         toggleButton.style.transition = 'right 0.3s ease, width 0.3s ease'; // Smooth transitions for both right and width
  30.         toggleButton.style.overflow = 'hidden'; // Hide text overflow
  31.         toggleButton.style.whiteSpace = 'nowrap'; // Prevent text wrapping
  32.         toggleButton.style.textAlign = 'center';
  33.  
  34.         document.body.appendChild(toggleButton);
  35.  
  36.         let inverted = localStorage.getItem('invertedColors') === 'true';
  37.         setInvertedMode(inverted);
  38.  
  39.         // Hover effect to slide out the button and reveal text
  40.         toggleButton.addEventListener('mouseenter', () => {
  41.             toggleButton.style.right = '0'; // Slide out
  42.             toggleButton.style.width = '150px'; // Expand to show text
  43.             toggleButton.innerHTML = '☼ Invert Colors'; // Add text next to the arrow
  44.         });
  45.  
  46.         toggleButton.addEventListener('mouseleave', () => {
  47.             toggleButton.style.right = '-12px'; // Slide back in
  48.             toggleButton.style.width = '50px'; // Shrink back to arrow only
  49.             toggleButton.innerHTML = '☼'; // Show only the arrow
  50.         });
  51.  
  52.         toggleButton.addEventListener('click', () => {
  53.             inverted = !inverted;
  54.             setInvertedMode(inverted);
  55.             localStorage.setItem('invertedColors', inverted);
  56.         });
  57.  
  58.         function setInvertedMode(isInverted) {
  59.             if (isInverted) {
  60.                 document.documentElement.style.filter = 'invert(1)';
  61.                 toggleButton.style.backgroundColor = 'rgba(200, 200, 200, 0.8)'; // Muted light color
  62.                 toggleButton.style.color = '#000000'; // Dark text
  63.             } else {
  64.                 document.documentElement.style.filter = 'invert(0)';
  65.                 toggleButton.style.backgroundColor = 'rgba(50, 50, 50, 0.8)'; // Muted dark color
  66.                 toggleButton.style.color = '#ffffff'; // Light text
  67.             }
  68.         }
  69.     });
  70. })();
  71.