View source for Use my colors

This page addresses web page '''colors''' with some conceptual alternatives to use of   '''Tools, Options, Content, [http://support.mozilla.com/kb/Options%20window%20-%20Content%20panel#w_fonts-colors Fonts and Colors]'''   to specify  font, links, and background colors and whether to allow pages to override your default color choices.  

==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 '''[https://addons.mozilla.org/firefox/addon/1224 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 [[Updating_add-ons | override non-compatibility]] to use this small extension in Firefox 3.)

==Bookmarklets== 
You can temporarily use a bookmarklet to change colors or other page styling then use ''F5'' to reset the appearance back to normal, some bookmarks will toggle by running them again.  Reloading a page also wipes out changes made by bookmarklets.  A bookmarklet is JavaScript code that you can be run from the location bar;  therefore, it can be bookmarked, and invoked as a bookmark.  Assigning an easily remembered word (or characters) as a Keyword  to the bookmark properties would be highly recommended for easy access.  

An example would be '''[https://www.squarefree.com/bookmarklets/zap.html zap colors]''' bookmarklet on the [https://www.squarefree.com/bookmarklets/zap.html  Bookmarklets for Zapping Annoyances] page at [https://squarefree.com/bookmarklets 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 [http://www.mvps.org/dmcritchie/firefox/kws.htm  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.

[[Category:Websites]]

==use of Stylish extension==
According to [https://bugzilla.mozilla.org/show_bug.cgi?id=1472948 this bug report] "The 'Stylish' extension was recently sold and the new company now logs all browser history.". [https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/] Supposedly [https://addons.mozilla.org/en-GB/firefox/addon/styl-us/ Stylus] is a fork of that extension without the spyware. See https://forum.userstyles.org/categories/stylish for a discussion about what's going on. Another fork is [https://github.com/JackCDK/osprey Osprey] but they have no plans to support Firefox, recommending you use the more bare bones [https://addons.mozilla.org/en-US/firefox/addon/stylrrr/ stylrr] add-on instead.

Styles from [http://userstyles.org 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 [http://userstyles.org/stylish read about Stylish] at userstyles.org and can '''[https://addons.mozilla.org/firefox/addon/2108 install Stylish]''' at addons.  Stylish resides on your computer and is under your control.  Move the Stylish button to your toolbars using [[Customize]].

===Global Styles===
You can install a style into Stylish as a global style to change all web pages, as in '''[http://userstyles.org/styles/9655 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 '''[http://userstyles.org/styles/336 Inputs Default to Black on White]''' style.

But there are a lot of [http://userstyles.org/styles;global Global styles] available at userstyles.org  that actually are intended for global use, and many are comparable to Themes used in Firefox.

===Site Styles===
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 [http://userstyles.org/styles;site Site Styles] at userstyles.com.
* [http://userstyles.org/styles/16842 Red: Mark visited links as read on unruly domains | userstyles.org], mark visited links red on selected sites,
* [http://userstyles.org/styles/17357 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 [http://userstyles.org/styles/526 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.

==Extensions==
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.
* [https://addons.mozilla.org/firefox/addon/4242 Accessibar]  has a number of things that you can change for accessibility (109 KB download).
* [http://codefisher.org/toolbar_button/toolbar_button_maker 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.
* [https://addons.mozilla.org/en-us/firefox/addon/nosquint/ 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. 
* [https://addons.mozilla.org/en-US/firefox/addon/1224/ Read Easily] adds toolbar button to  toggle page style on/off
* [https://addons.mozilla.org/en-US/firefox/addon/10596 toggleDocumentColors :: Firefox Add-ons] toggles [[Browser.display.background_colors | browser.display.use_document_colors]] (which is the same as Edit -&gt; Preferences -&gt; Colours -&gt; Allow pages to choose their own colors).  Shortcut key is Ctrl+E.

===Auxiliary Extensions===
Extensions to help change things but don't change the colors in themselves.
* [[Keyconfig extension]] (available [http://forums.mozillazine.org/viewtopic.php?t=72994 here]) allows you to configure keyboard shortcuts.  It works with [[Firefox]], [[Thunderbird]], and (probably) [[Mozilla Suite|Mozilla Suite/SeaMonkey]].  Shortcuts defined via a key can be changed. For more author notes see [http://dorando.emuverse.com/projects/mozilla/readme.html this].

==Themes==
Changes to the chrome is a huge item with Firefox and Mozilla browsers that there is a whole category named [http://kb.mozillazine.org/Themes Themes] that are installed as Themes and not as an Extension.   You can have a look at the [https://addons.mozilla.org/firefox/search?q=&cat=2%2C0 Themes] available at addons.mozilla.org

==Color Blindness==

* [http://www.vischeck.com/vischeck/vischeckURL.php Vischeck: VischeckURL] Try Vischeck on a Webpage
* [http://colorfilter.wickline.org/ Colorblind Web Page Filter] Use the colorblind colorlab to select safe colors earlier in the design process.
* [http://live.gnome.org/GAP/ColorBlind 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.
* [http://jp29.org/wpowca.htm Web Content Accessibility Information.] 

==Test Colors Changes==
'''Test Color changes''' (CSS): <span style="color:black;border:1px solid;">black</span>, <span style="color:fuchsia;border:1px solid;">fuchsia</span>, <span style="color:green;border:1px solid;">green</span>, <span style="color:grey;border:1px solid;">grey</span>, <span style="color:lime;border:1px solid;">lime</span>, <span style="color:magenta;border:1px solid;">magenta</span>, <span style="color:maroon;border:1px solid;">maroon</span>, <span style="color:navy;border:1px solid;">navy</span>, <span style="color:olive;border:1px solid;">olive</span>, <span style="color:orange;border:1px solid;">orange</span>, <span style="color:pink;background-color:blue;border:1px solid;">pink on blue</span>, <span style="color:purple;border:1px solid;">purple</span>, <span style="color:red;border:1px solid;">red</span>, <span style="color:teal;border:1px solid;">teal</span>, <span style="color:white;background-color:black;border:1px solid;">white on black</span>, <span style="color:yellow;background-color:green;border:1px solid;">yellow on green</span> 

==See also==
* [[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.''''

==External Links==
* [http://en.wikipedia.org/wiki/Cascading_Style_Sheets Cascading Style Sheets - Wikipedia, the free encyclopedia]

[[Category:Accessibility (Firefox)]]