Universal Sepia Mode Toggle

WHAT IT DOES

Universal Sepia Mode Toggle applies a warm sepia-toned filter to any webpage you visit, transforming harsh white backgrounds and cool-toned interfaces into a gentle, vintage reading environment. The primary function is to reduce blue light exposure during extended browsing sessions, easing eye strain and promoting a calmer digital experience. You can enable or disable the sepia effect with a single click from the toolbar icon, and fine-tune the intensity from a subtle 10% warmth to a rich 100% sepia immersion. Unlike simple browser reader modes that reformat page layouts, this extension preserves the original design of every site while overlaying a color temperature shift that mimics the look of aged paper or classic photography.

WHERE IT RUNS

The extension operates on every website you visit, including dynamic single-page applications, news portals, social media feeds, e-commerce platforms, and document viewers. It works seamlessly across both desktop and mobile browsing environments, adapting to viewport changes and responsive designs. The sepia filter applies to the entire page content by default, but you can optionally restrict the effect to text elements only, leaving images, videos, and interactive graphics in their original colors. This selective approach ensures that visual media remains authentic while reading areas become warm and comfortable. The extension runs locally in your browser, processing each page in real-time without sending any data to external servers.

HOW TO USE

After installation, click the extension toolbar icon to toggle sepia mode on or off for the current page. A small indicator will show whether the effect is active. To adjust the sepia strength, open the settings panel by right-clicking the toolbar icon or using the keyboard shortcut (Ctrl+Shift+S by default). The panel includes a slider that lets you set the intensity from 0% (disabled) to 100% (full sepia). You can also toggle the "Text Only" mode, which applies the filter exclusively to paragraphs, headings, and other text containers while leaving backgrounds, images, and UI elements unaffected. Your preferences are automatically saved and restored across browser sessions. For per-site customization, the panel includes a dropdown that lets you set unique intensity levels for different domains, remembering your preferred warmth for each site you visit.

THE ACTUAL MECHANISM — CSS FILTER PIPELINE WITH SELECTIVE INJECTION

Unlike content scripts that rely on generic CSS overrides, Universal Sepia Mode Toggle uses a dual-layer approach. First, it injects a high-priority CSS rule that applies a `filter: sepia()` value to the `:root` or `html` element, ensuring the effect cascades to all children. For text-only mode, it uses a more sophisticated selector: `*:not(img):not(video):not(canvas):not(svg):not(iframe)::before` combined with `mix-blend-mode` to layer the sepia effect specifically over text-bearing elements while preserving the original background and media colors. The intensity is controlled by dynamically updating the CSS custom property `--sepia-intensity` which feeds into `filter: sepia(var(--sepia-intensity))`. To handle dynamically loaded content (SPAs, infinite scroll), the extension uses a `MutationObserver` that watches for DOM changes and reapplies the filter to new elements without disrupting page performance. This pipeline ensures instant response, zero layout shifts, and full compatibility with modern web frameworks.

THE PANEL

The settings panel is a draggable overlay that appears centered on your screen. You can reposition it by clicking and dragging the title bar, and it will snap to the nearest edge if you release it near the screen boundary. To collapse the panel into a compact bar, click the minimize button; expand it again by clicking the same button. The panel automatically resizes to accommodate different screen resolutions, with a minimum width of 320px and a maximum of 560px. Press the Escape key to dismiss the panel without saving changes. All controls—intensity slider, text-only toggle, and per-site dropdown—are accessible within a clean, accessible interface.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying filtering engine and cross-browser compatibility layer. Due to the evolving nature of websites and their underlying code structures, certain complex web applications or heavily obfuscated pages may occasionally require script updates to maintain full functionality. The extension will automatically check for updates weekly and notify you when a new version is available. No personal data, browsing history, or page content is ever collected, stored, or transmitted. All preferences are saved locally using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.