Page Background Changer

WHAT IT DOES

Page Background Changer is a browser extension that allows you to change the background color of any webpage using a color picker or preset colors. The background color is applied to the body element and all elements with transparent backgrounds, transforming the entire page's appearance. You can choose from a palette of preset colors, pick any color using the HTML5 color picker, or use the built-in presets for quick selection. The tool includes a toggle to enable or disable the background change, and the setting is saved per website so you can have different background colors for different sites. A reset to default option restores the original background. The tool is ideal for users who want to reduce eye strain with soft colors, create a dark mode on light pages, or simply personalize their browsing experience.

WHERE IT RUNS

Page Background Changer runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, injecting CSS to override background colors. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the background change. Use the color picker to select any color, or click one of the preset color buttons to quickly apply a color. The current color is displayed as a preview and as a hex code. Click the "Reset Default" button to restore the default background color (white). Click the "Reapply" button to reapply the current color if it was removed by page changes. The color and enabled state are saved per website, so your preferences persist across visits.

REAL MECHANISM — WHY THIS WORKS

Most background color tools rely on modifying the body's style property, which can be overridden by the page's CSS or other scripts. Page Background Changer uses a combination of direct style injection and high-specificity CSS rules to ensure the background color is applied reliably. The tool injects a style element with !important rules that override the background color of html, body, and all descendant elements. This approach ensures that the background color is applied even if the page uses inline styles or external CSS. The tool also sets the body's background color directly as a fallback. When the toggle is disabled, the injected style element is removed and the body's background is cleared, restoring the page's original appearance. The color is stored in GM_setValue and automatically reapplied on page load. The preset colors are organized into a grid for quick selection, and the color picker allows for custom color selection. This approach ensures consistent, reliable, and fully private background color changes without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view color options. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, background color, and enabled state—are saved per domain for a seamless experience.

PLEASE NOTE

Page Background Changer requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool applies background color using CSS !important rules, which may conflict with page styles that also use !important. Some elements with fixed backgrounds or gradients may not be fully affected. The tool works best on pages with simple background structures. All settings are stored locally in your browser using GM_setValue. No page content, color data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only modifies CSS at your request.