This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Is there a way to disallow web pages to modify foreground color of elements if background of those elements was not changed as well (and vice versa)?

  • 6 cavab
  • 5 have this problem
  • 16 views
  • Last reply by Nert

more options

I have very sensible defaults for my display; i.e. I have dark GTK scheme (dark gray background, light gray text) that suits me way more when working on my computer while it's dark around. I, however, like looking at web pages as how they were mean to be seen. Unfortunately, most of web designers don't think about anyone having non-default colors set up.

Example one ( http://www.cedok.cz ): This site's CSS style has "color: rgb(45, 45, 45);" for the whole <body> but for <select> elements there is no "background-color" set. This means there is a select box rendered with dark gray background and dark gray foreground (text color). This is pretty badly readable (obviously). To mention one particular element from this site: e.g. <select id="ctl00_ContentPlaceHolderLevySloupec_HledaniMultiTab1_HledaniZajezdu1_ddlTypZajezdu">

Example two ( https://support.mozilla.org/en-US/questions/new/desktop/customize/form ): On this page (where I'm currently filling in this question) the <textarea id="id_content"> has "background: ... rgb(255, 255, 255);" set, but with my default font color, this textarea is rendered as light gray text on a white background. Again, pretty unreadable (and eye-hurting).

I can provide screenshots and more reasoning if needed.

I'm asking if there is (or might be) an option (even disabled by default) or at least an add-on which would keep default colors unless both foreground and background colors were specified. I think this might make Firefox very usable for many people which like to have their default colors configured.

In case you won't be able to help me by fixing this, could you redirect me to the right place where I could get this requested in a way that might be really possible to happen (bugzilla?).

Thank you very much in advance.

I have very sensible defaults for my display; i.e. I have dark GTK scheme (dark gray background, light gray text) that suits me way more when working on my computer while it's dark around. I, however, like looking at web pages as how they were mean to be seen. Unfortunately, most of web designers don't think about anyone having non-default colors set up. Example one ( http://www.cedok.cz ): This site's CSS style has "color: rgb(45, 45, 45);" for the whole <body> but for <select> elements there is no "background-color" set. This means there is a select box rendered with dark gray background and dark gray foreground (text color). This is pretty badly readable (obviously). To mention one particular element from this site: e.g. <select id="ctl00_ContentPlaceHolderLevySloupec_HledaniMultiTab1_HledaniZajezdu1_ddlTypZajezdu"> Example two ( https://support.mozilla.org/en-US/questions/new/desktop/customize/form ): On this page (where I'm currently filling in this question) the <textarea id="id_content"> has "background: ... rgb(255, 255, 255);" set, but with my default font color, this textarea is rendered as light gray text on a white background. Again, pretty unreadable (and eye-hurting). I can provide screenshots and more reasoning if needed. I'm asking if there is (or might be) an option (even disabled by default) or at least an add-on which would keep default colors unless both foreground and background colors were specified. I think this might make Firefox very usable for many people which like to have their default colors configured. In case you won't be able to help me by fixing this, could you redirect me to the right place where I could get this requested in a way that might be really possible to happen (bugzilla?). Thank you very much in advance.

All Replies (6)

more options

I am not sure if this is what you want but there are several Firefox ad-ons that can change web page colors to what you want. https://addons.mozilla.org/en-US/firefox/

more options

Thanks for the reply, but I'm sorry, no. I don't want any addon that customizes colors, I want to use default colors and only prohibit changing them unless both background and foreground colors are changed.

I have made no color changes WRT to Firefox *only*, I just changed the default for the whole toolkit (gtk in this case). The thing I need is to disable changing *only one* property out of two ({back,fore}ground). Whenever the second one gets set as well, this new setting (both of them) may get reflected, but not before that. It'd be nice to keep this when changing the colors back (deleting the style), but that's not necessary.

I hope that's understandable, feel free to ask for if that's not the case.

To express what I mean a bit more precisely, see the attached image. In that image there are four textareas (one of the elements that gets affected by this). First one is a default one (which I want to have if the page has nothing set), the second one is nicely modified to fit for example to a blue-ish page (this one I like as well). Second row of textareas shows how the final element looks like if the page has only one of these elements set up. First one changes background without changing font color, the second one vice versa. Both of them are very badly readable, especially with low lighting around.

This is consequently the same case when it comes to default page background which I cannot set at all, because too many pages have only "color:" set without changed background and that is completely messed up then. Going to extremes, I might mention all color-related modifications (see how ugly the borders look when the background is changed and nothing is done to these borders, their size and color is kept default), but I understand that's too much.

more options

If you are familiar with CSS, you could use a userContent.css file and set "rules" for specific web pages or domains.
http://kb.mozillazine.org/UserContent.css
https://developer.mozilla.org/en-US/docs/Web/CSS/@document
http://lxr.mozilla.org/seamonkey/source/suite/locales/en-US/profile/chrome/userContent-example.css

Sorry, I have no idea how you might do what you are asking, by comparing cases and having a specific change made as a result of the comparison.

more options

Thank you for your reply, I use userContent.css for one domain already, but I don't know how to modify it properly to my needs. If there is a selector based on element's computed css value, it might be possible to somehow hack it in the file. The only thing I've found is css-conditional selectors for CSS which are not helpful in this case.

more options

You could try the MozillaZine General forum - http://forums.mozillazine.org/viewforum.php?f=7 - and see if one of the CSS whizzes over there can offer any other ideas. You will have to register over there to be able to post in the MozillaZine forum.

more options

Thanks, I'll see what they tell me. However, if anyone has another possible solution, feel free to express yourself. I'll probably also try adding a request in bugzilla if I'll find no solution.