Skip to main content

How to override website color schemes in Firefox

Whenever you visit a web page on the Internet one of two things can happen in regards to the color scheme used by it: the site may use its own color scheme to paint foreground and background colors as well as link and visited link colors, or Firefox's default color scheme may be used.

While that is usually not a problem, you may sometimes encounter websites that use color schemes that don't work for you.

Maybe it is not highlighting links at all or only barely so that it is difficult to find links in the text. Or, it uses too dark or bright colors, or does not highlight visited links appropriately.

What you can do then is to enforce the use of Firefox's color scheme on the website in question.

Firefox itself comes with override options for all styled websites only which you find on the content tab of the about:preferences page.

The primary tab displays options to change the default font type and color. A click on advanced next to it opens an overlay that you use to specify proportional, serif, sans-serif and monospace fonts and sizes that you want used on sites.

firefox colors

Firefox font and colors settings

A click on colors on the other hand lets you select text, background unvisited and visited link colors for all pages you visit provided that you switch from "only with high contrast themes" to always in the overlay window.

colors

Color options

The all or nothing option does not work overly well though as you will run into sites that won't display properly if you select to apply a custom color scheme to all sites you visit.

That's where extensions come into play which provide you with those options.

Color customizing extensions

Color That Site! - The add-on for Firefox allows you to change the foreground and background color of web pages that you visit in Firefox permanently. It can be configured to set custom colors for individual pages, a folder, site or domain. Useful if you don't want to change link colors at all. link to full review

Color Toggle - This extension lets you set up two different color profiles for foreground, background, link and visited link colors in Firefox that you can switch between using a hotkey. This is a temporary solution that switches to the color scheme on all websites in the browser just like Firefox's default scheme would do.

Colorific - Apply one of 28 custom themes to select websites that you visit in Firefox. The themes may change all colors including link colors.

NoSquint - It allows you to set link colors and whether links should always be underlined among other text-related customizations. link to full review here.

Stylish - Download user styles from the official website or create your own custom styles for websites to override color schemes. Basic understanding of CSS is required for the latter. The extension gives you full control over website styles on the other hand and goes far beyond selecting different colors for links or the website's main colors.

Tips

There are not that many add-ons available that let you change link colors permanently on websites you visit. One away around this is to set a permanent color for links in Firefox and prevent sites from overriding that.

You may run into issues on some sites, for instance if selected link color and background color of the site match but that is easy enough to overcome by using one of the coloring extensions for Firefox as you can use them to set a permanent color scheme that matches the link color.

Other than that, Stylish may be the best option as it gives you full control over a website's styling.

Now You: Are you using custom styles for websites? If so why?

This article was first seen on ComTek's "TekBits" Technology News

HOME