Universal Background Color Picker

WHAT IT DOES

Universal Background Color Picker gives you complete control over the background color of every website you visit. Instead of being stuck with white, dark, or designer-chosen backgrounds, you can select any color that suits your visual preferences, reading comfort, or accessibility needs. The extension applies your chosen background color to the entire page, transforming harsh white backgrounds into soft, eye-friendly tones, or converting dark themes to lighter alternatives for better readability. A color picker lets you select any color precisely, while preset buttons offer quick access to popular shades including warm whites, cream tones, paper textures, and dark mode options. The extension preserves text color and other styling properties, ensuring readability is maintained. A live preview lets you see changes in real-time as you select colors, and a single toggle switch instantly reverts to the original page design or reapplies your custom background. All preferences are saved locally, so your preferred background color follows you across browsing sessions.

WHERE IT RUNS

The extension works on every website you visit, including complex single-page applications, news portals, social media platforms, e-commerce stores, document viewers, and web-based productivity tools. It runs locally in your browser, processing each page's DOM in real-time without sending any data to external servers. The background color adjustment applies immediately on page load and continues to work as you navigate, scroll, and interact with dynamic content. Whether you're reading articles, filling out forms, or browsing product listings, your preferred background color remains consistent. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, click the extension toolbar icon to open the Universal Background Color Picker panel. Use the color picker to select any color by clicking the color swatch, or enter a hex value directly. The current color and a small preview box are displayed for reference. To quickly choose a color, click any of the preset color buttons arranged in a grid—these include whites, creams, warm tones, dark shades, and muted colors suitable for comfortable reading. Click "Apply" to save the current color as your global default, applying it to all websites. The "Reset to Default" button reverts to the factory default background color. Use the toggle switch at the bottom of the panel to enable or disable the background color adjustment entirely, reverting to the original design with a single click. For per-site customization, click "Apply to This Site Only" to save a unique background color for the current domain, overriding your global choice. To revert a site to your global setting, click "Reset Site to Global."

THE ACTUAL MECHANISM — CSS INJECTION WITH UNIVERSAL BACKGROUND OVERRIDE

Unlike browser extensions that attempt to modify individual elements one by one through JavaScript iteration, Universal Background Color Picker uses a high-performance CSS injection strategy. When you apply a background color, the script creates a style element in the document head containing a CSS rule with the `!important` declaration. The rule targets a comprehensive selector list that includes `html, body, div, section, article, header, footer, nav, main, aside, figure, figcaption, details, summary, blockquote, address, p, h1-h6, li, td, th, caption, pre, code, kbd, samp, var, abbr, acronym, b, bdo, big, br, cite, dfn, em, i, ins, kbd, mark, meter, output, progress, q, ruby, s, samp, small, strike, strong, sub, sup, time, tt, u, var, wbr, span, label, button, input, textarea, select, option, optgroup, legend, fieldset, dl, dt, dd, ol, ul, menu, dir, applet, object, iframe, embed, param, source, track, canvas, map, area, noscript, noembed, script, style, link, meta, title, head`. The `background-color: [color] !important;` declaration overrides any inline styles or framework-generated CSS, ensuring the color applies correctly across all frameworks including React, Vue, Angular, and WordPress. The `!important` flag is critical because many modern CSS frameworks use high-specificity selectors that would otherwise resist modification. For dynamic content, the extension uses a MutationObserver that detects when new elements are added to the DOM and re-injects the style rules only when necessary, avoiding performance degradation. This pipeline ensures near-instant response with zero layout recalculation overhead, even on content-heavy pages with thousands of elements.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the color picker, preset color grid, apply and reset buttons, per-site settings, and the enable/disable toggle—are accessible within a clean, high-contrast interface that respects your system's color scheme.

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. Because websites frequently update their code structures and frameworks, certain complex web applications may occasionally require script updates to maintain full background color adjustment 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 background color preferences are saved using the browser's local storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.