Universal Dark Mode Forcer

WHAT IT DOES

This script forces dark mode on any webpage, making browsing easier on your eyes, especially at night or in low-light environments. When enabled, the script applies a dark theme overlay to the page, transforming light backgrounds to dark and light text to dark-compatible colors. You can choose from four themes: "Invert" (color inversion), "Dark Gray" (soft dark background), "OLED Black" (pure black for OLED screens), and "Sepia" (warm dark theme). A toggle lets you enable or disable dark mode instantly. An option to preserve images keeps pictures unchanged while darkening the rest of the page. The selected theme is saved locally and persists across browsing sessions.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with visual content—articles, dashboards, social media, and more. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable dark mode" toggle enables or disables the script.

- Select a theme from the buttons: "Invert," "Dark Gray," "OLED Black," or "Sepia."

- Toggle "Preserve images" to keep images unchanged while applying dark mode to text and backgrounds.

- Click "Refresh" to re-apply the dark mode if it doesn't appear correctly.

- Click "Reset" to restore the default settings.

The dark mode applies instantly when enabled. The theme is saved automatically.

TECHNICAL SECTION — REAL MECHANISM

The script injects a style element into the page head containing CSS rules that override the page's default colors. The "Invert" theme uses filter: invert(1) hue-rotate(180deg) to invert all colors and then restore hue. The "Dark Gray" theme uses filter: brightness(0.85) contrast(1.1) with a dark background and light text. The "OLED Black" theme uses filter: brightness(0.7) contrast(1.2) with a pure black background and white text. The "Sepia" theme uses filter: sepia(1) brightness(0.7) contrast(1.1) with a warm dark background. The script sets background and text colors on html, body, and all elements using CSS !important to override site styles. The preserve images option adds an override that sets filter: none !important on img, video, canvas, and iframe elements. The style element is recreated whenever the theme changes, and a MutationObserver watches for DOM changes to re-apply the theme when new content is loaded.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The script applies filters and color overrides to the entire page, which may affect the appearance of images, videos, and UI elements. The "Preserve images" option helps mitigate this. Some websites may use custom styles that conflict with the dark mode overrides. The script uses CSS !important to override site styles, which may cause issues on sites with complex styling. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.