Use my colors
This page addresses web page colors with some conceptual alternatives to use of Tools, Options, Content, Fonts and Colors to specify font, links, and background colors and whether to allow pages to override your default color choices.
- 1 Remove all styling with 'No Styles' styling
- 2 Remove all styling with an extension
- 3 Bookmarklets
- 4 use of userChrome.css
- 5 use of Stylish extension
- 6 Extensions
- 7 Themes
- 8 Color Blindness
- 9 Test Colors Changes
- 10 See also
- 11 External Links
Remove all styling with 'No Styles' styling
A quick way to view a page with bad color choices is to remove all styling, which you can do with View, page styles, no styles, and return to normal with Basic style. That includes formatting as well as colors, and is a quick way of making a page readable.
Remove all styling with an extension
A quicker way to get an equivalent of 'No Styles' is the Read Easily extension which can be toggled on/off with a toolbar button, context menu item or a hotkey (CTRL+SHIFT+Z) to disable/enable styles on web pages. Applies to the current web-page. (Although nothing changed in Firefox to make the extension actually incompatible, you will currently have to override non-compatibility to use this small extension in Firefox 3.)
An example would be zap colors bookmarklet on the Bookmarklets for Zapping Annoyances page at squarefree.com. Click on the "zap colors" button on that page to see change. The button is actually a link. You can drag the link to a folder on your toolbars, and give it a keyword shortcut so you can implement it from the location bar, or drag it directly to the bookmarks toolbar itself and use it like a button.
use of userChrome.css
You can make global styling changes, with userChrome.css and userContent.css but it takes restarting of Firefox to implement and it is not very practical for most users for this type of a change as they would want to change things or instantly turn changes on or off.
use of Stylish extension
Styles from userstyles.org are used with the "Stylish" extension and would be the same as having them in your userChrome.css to change your chrome appearance. But stylish allows you to have separate style changes that you can turn on/off and use them immediately without restarting Firefox. You can read about Stylish at userstyles.org and can install Stylish at addons. Stylish resides on your computer and is under your control. Move the Stylish button to your toolbars using Customize.
You can install a style into Stylish as a global style to change all web pages, as in Zap Colors style, which is similar to the Zap Colors bookmarklet. This particular example would not be as practical as a toolbar button, or a bookmarklet because it overrides all web pages and you have to go through Styles Manager to change. But you could easily convert it to be site specific by creating a new style modified to be site specific. Another style of interest might be Inputs Default to Black on White style.
But there are a lot of Global styles available at userstyles.org that actually are intended for global use, and many are comparable to Themes used in Firefox.
On a per site basis, you can use a style from userstyles.org that is specific to a site(s) or domain(s). Examples can be found in Site Styles at userstyles.com.
- Red: Mark visited links as read on unruly domains | userstyles.org, mark visited links red on selected sites,
- Red:visited -- Mark visited links Red | userstyles.org, mark visited links red on all sites.
There is a Stylish equivalent for "Read Easily" extension but without the button would not be as practical; however, you can modify colors exactly as you want, and you could also modify the code to apply to only certain sites, so it may be an excellent starting point for your own customizations. See Read Easily extension's styles and modify code to your own choice of sites and give your new style a new name.
Most of the styles at userstyles.org are probably site specific styling changes, each site, or groups of sites would be another style, so there is a big proliferation in that area of styling changes way beyond simple color changes.
Some of the extensions involved with colors may be very large like 100kb so you might want to check carefully that it has features that you actually want/need.
- Accessibar has a number of things that you can change for accessibility (109 KB download).
- Custom Toolbar Buttons Maker select "Toggle Page Colors", install, move custom button to toolbar. Toggles preferences, removes some but not all images (loses the entire mozillaZine banner exactly same as the preference). Another button that can be included is "Page Fonts", which toggles page fonts between your colors and the web page's colors. Another button that may be needed to read some pages is "Toggle Styles" to toggle CSS styling off or back on.
- NoSquint allows color settings for each of text, background, unvisited links, and visited links (unlike Tools, Options which is as a group all or nothing). Main purpose is to allow you to adjust the text-only and full-page (both text and images) zoom levels as well as color settings both globally (for all sites) and per site.
- Read Easily adds toolbar button to toggle page style on/off
- toggleDocumentColors :: Firefox Add-ons toggles browser.display.use_document_colors (which is the same as Edit -> Preferences -> Colours -> Allow pages to choose their own colors). Shortcut key is Ctrl+E.
Extensions to help change things but don't change the colors in themselves.
- Keyconfig extension (available here) allows you to configure keyboard shortcuts. It works with Firefox, Thunderbird, and (probably) Mozilla Suite/SeaMonkey. Shortcuts defined via a key can be changed. For more author notes see this.
Changes to the chrome is a huge item with Firefox and Mozilla browsers that there is a whole category named Themes that are installed as Themes and not as an Extension. You can have a look at the Themes available at addons.mozilla.org
- Vischeck: VischeckURL Try Vischeck on a Webpage
- Colorblind Web Page Filter Use the colorblind colorlab to select safe colors earlier in the design process.
- GAP/ColorBlind - GNOME Live! Colorblind Simulator, describes a Firefox extension that allows a user, and more importantly a developer, to simulate how a webpage might look for colorblind people.
- Web Content Accessibility Information.
Test Colors Changes
Test Color changes (CSS):, , , , , , , , , , , , , , ,
- Accessibility features of Firefox. Firefox includes many features to make the browser and web content accessible to all users, including those who have low vision, no vision, or limited ability to use a keyboard or mouse. 'At the bottom of MozillaZine KB articles, you will find additional related articles through category links.'