Free tools Windows power users keep installed
One-click scans. No signup required.
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
For a quick light-or-dark change, start with your browser’s appearance or accessibility settings. To apply a particular palette—such as warm cream backgrounds, muted blue links, or dark surfaces—across selected websites, use a user-style extension such as Stylus to add CSS. Neither method can reliably recolor every part of every page: browser-owned screens, some embedded content, and complex graphics may not respond.
As an Amazon Associate I earn from qualifying purchases.
Choose the method that matches what you want to change
| Goal | Best starting point | What it changes |
|---|---|---|
| Change browser tabs, toolbar, or other interface elements | Chrome or Firefox appearance settings | The browser interface and selected browser pages; not every website |
| Let compatible websites follow a light or dark preference | Browser or operating-system appearance settings | Websites that support the browser’s preferred color scheme |
| Improve color distinction or use high-contrast colors | Browser accessibility controls | Color correction or site color schemes, with less fine-grained control than CSS |
| Set specific page, text, link, or control colors | Stylus or another user-style manager | CSS on sites where the extension can apply a style |
These are different jobs. A browser theme decorates browser chrome; a site’s own theme or the web’s prefers-color-scheme preference changes a page only when that site responds; a user style overrides selected page rules. The CSS color-scheme property and prefers-color-scheme media query are mechanisms websites can use to support light and dark appearances, not a guarantee that every site will change.
Try the browser’s built-in controls first
Chrome: change its appearance
On desktop Chrome, open a new tab, select Customize Chrome, then choose Light, Dark, or Device under Appearance. This is useful for Chrome’s interface and pages that honor the device preference. Google describes Chrome dark mode as affecting the homepage, toolbar, settings, and some other pages—not as a universal website recoloring switch. See Google’s Chrome dark-mode instructions; labels and availability can vary by platform and release.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Chrome: use color correction or high contrast
For color-correction or high-contrast needs, use Chrome’s accessibility extensions described in Google’s accessibility instructions. Color Enhancer lets you select the color-confusion pattern that fits and adjust its correction slider. High Contrast offers color schemes that can be applied by site. These tools are quicker than writing CSS, but they do not offer the same selector-level control. Google notes that some Chrome pages, including the Web Store, New Tab, and Settings pages, cannot be adjusted by the extension.
Firefox: set website appearance or custom colors
Firefox offers website appearance choices and custom web-content colors. Open Firefox settings and look in the appearance or accessibility controls for website appearance and custom colors; exact placement can vary with the release and operating system. Firefox can use custom foreground, background, visited-link, and unvisited-link colors. Its result can be affected by high-contrast mode and privacy settings. See Mozilla’s website appearance settings help and its technical notes on colors and high contrast.
Use Stylus for a repeatable custom palette
Stylus is a user-style manager for installing or writing CSS that changes website appearance. It is available through the Chrome Web Store and Firefox Add-ons. The Stylus project describes support for Chrome, Firefox, and Chromium-based browsers. It can also manage UserCSS styles; see the Stylus UserCSS documentation.
Recommended Free Tools
- Install Stylus from the official store for your browser, and review the permissions it requests. A style manager needs page access to apply CSS to the sites you choose.
- Open a target website and select the Stylus toolbar icon. Choose the control for creating a style for the current site or domain. Button wording can vary by browser and extension release.
- Paste a starter style like the one below, then save and enable it.
- Refresh the page. If parts remain unchanged or become difficult to read, edit the style using the troubleshooting guidance below.
This restrained starting point sets the main page colors and common controls without inverting photographs or every graphic. It is not a finished theme for every site:
/* Basic user-style color scheme */
:root {
color-scheme: dark !important;
}
html,
body {
background: #171717 !important;
color: #eeeeee !important;
}
body,
main,
article,
section,
nav,
aside,
header,
footer,
div {
background-color: transparent !important;
}
a,
a:visited {
color: #8ab4f8 !important;
}
button,
input,
textarea,
select {
background-color: #262626 !important;
color: #f2f2f2 !important;
border-color: #666666 !important;
}
hr,
blockquote,
pre,
code {
border-color: #555555 !important;
background-color: #222222 !important;
}
::selection {
background: #8ab4f8 !important;
color: #111111 !important;
}The broad transparent-background selectors can flatten cards, menus, or other visual groupings. If they do, remove them and add narrower rules only for the bright surfaces that need changing. Start with page background, text, links, and controls; inspect the result before expanding the selector list. !important can help override site rules, but using it everywhere makes fine adjustments harder.
Scope the palette to the sites that need it
A style created from the current site is the simplest way to avoid changing every page. For shared rules across a few domains, Stylus supports site-scoped styles. Its editor can generate the scope when you create a style from a page; this avoids relying on syntax that may differ between managers. A domain-scoped example is:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
@-moz-document domain("example.com"), domain("example.org") {
body {
background: #181818 !important;
color: #eeeeee !important;
}
a,
a:visited {
color: #9ecbff !important;
}
}Use the editor’s generated scope and confirm it matches the intended sites before saving. A truly global style can override a site’s carefully designed dark mode and interfere with maps, shopping carts, dashboards, charts, or media controls. Keep an easy way to turn a style off from the Stylus menu.
Build a palette that remains readable
Think beyond the page background. A usable scheme needs distinct colors for the main surface, raised surfaces, body text, secondary text, links, borders, focus indicators, selection, and status messages. Cream, pale yellow, and muted colors are just as possible as dark mode, but text and controls still need clear separation from their backgrounds.
- Keep links identifiable. Visited and unvisited links should remain distinguishable from body text; do not rely on subtle hue differences alone.
- Preserve keyboard focus. Make sure a visible outline remains around the active link, button, or field. Check
:focusand:focus-visiblestates if the site’s indicator disappears. - Check interaction states. Menus, dialogs, hover states, disabled controls, errors, and success messages may use separate colors from the main page.
- Use contrast as a check, not a complete verdict. Google’s accessibility guidance cites 4.5:1 contrast for ordinary text and 7:1 for other text and images in that guidance; those figures alone do not establish that a palette is comfortable or accessible. See Google’s contrast guidance.
- Do not make color carry meaning by itself. Status, errors, and chart categories should also have text, symbols, patterns, or labels.
Test ordinary and small text, links, focus indicators, controls, and colored status information at your normal zoom and with keyboard navigation. A numerically strong contrast can still feel harsh, produce glare, or make thin text difficult to read.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Fix common styling problems
| What you see | What to try |
|---|---|
| Text or a menu becomes unreadable | Disable the style from the Stylus popup, then re-enable it and remove the broadest selector. Inspect the affected element and add a targeted rule for its background and text, including hover and focus states where needed. |
| Inputs or buttons remain bright | Target input, textarea, select, and button. If needed, add specific rules for placeholders, focus outlines, checkboxes, date fields, or search controls. |
| Photographs, logos, or video look wrong | Avoid blanket filters such as img, video { filter: invert(1); }. Inversion can damage media; target only a known element when a filter is genuinely useful. |
| A style works on one route but not another | Sites can use different templates and dynamically rendered components. Prefer stable attributes or classes over generated class names that may change after a redesign. |
| An embedded area stays unchanged | Content in a separately loaded or cross-origin iframe may not be reachable from a style on the parent page. Browser permissions and page boundaries limit what can be styled. |
| A component ignores normal page rules | Some components encapsulate their internal styles with Shadow DOM. A page-level stylesheet may not reach those elements. |
| A site keeps undoing the colors | Dynamic scripts may reapply inline styles or rebuild components. Try a more specific selector or a stable parent/data attribute, use !important selectively, and check whether the site has its own theme control. |
| Chrome’s own settings or other browser pages do not change | Extensions do not have universal access to privileged browser pages. Google also identifies Chrome’s Web Store, New Tab, and Settings pages as inaccessible to its color extensions. |
For ordinary page content, “any web page” means a page where the browser and extension can apply CSS—not every pixel rendered by the browser. Canvas drawings, images, video, browser-owned pages, embedded documents, and encapsulated components may need separate handling or may not be affected.
Advanced option: override site color variables
Some sites define CSS variables for their surfaces and text. When a site actually uses them, overriding those variables can be cleaner than targeting many individual elements:
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute:root {
--background: #181818 !important;
--surface: #242424 !important;
--text: #eeeeee !important;
--muted-text: #bbbbbb !important;
--accent: #8ab4f8 !important;
}Variable names are site-specific; these are examples, not universal settings. Inspect the page’s computed styles to find the variables it really uses. For a site with a good native dark mode, prefer its theme control: the site can account for icons, charts, dialogs, embedded elements, and interaction states more completely than a general override.
The CSS color-scheme property can help browsers render built-in controls in a matching scheme, while prefers-color-scheme lets a site respond to a user preference. They complement rather than replace a site-specific style. See MDN’s color-scheme reference.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
