Dims bright webpages. Intended to be used with a _light_ theme, i.e. the background should be lighter than the text (but it can be medium grey or anything).
Dims bright webpages. Intended to be used with a _light_ theme, i.e. the background should be lighter than the text (but it can be medium grey or anything).
Background color can be customized in the settings of the provided auxiliary CSS file (a userstyle). You can either choose to use the built-in colors of Firefox (which are manually adjustable in about:config -> color) or a specific color which you select via a color picker.
You need both the script and the userstyle installed to make it work.
Usage instructions:
- Install the script (this thing).
- Install the Stylus extension, if you haven't already.
- Install the userstyle (https://userstyles.world/style/5900/dim-overly-bright-webpages-css-variables) (you must install this in order for the script to work)
- Visit any webpage and wait 3s, the script will then scan and "learn" the webpage. From then on, it will work instantly.
- If a webpage looks broken, scroll down to the bottom of the page and you should see two buttons; click on "Learn".
- To remove all learnt data associated with a webpage, scroll down to the bottom and click "Remove data (for this website)".
What works:
- 99% of webpages.
What doesn't work:
- Youtube. But it has dark mode anyway and the light mode is not bothersome either.
- Messenger has some bugs.
- Facebook probably has bugs. (read on)
- webpages that use gradients or alpha in the background color property. (to be added)
I would recommend to exclude facebook, messenger and github manually and enable the Dark Reader browser add-on for these specific websites only (which is possible) and select the "Light" theme.
Alternate names: Dim bright webpages, Fix bright webpages, Remove Blinding White Backgruond, Eye Saver, Remove CSS Colors, Disable CSS.
Search terms: remove white background, remove CSS, kill CSS, disable CSS, grey theme, dark theme.
Misc. notes:
- The script inserts a CSS style element in the HEAD element of the webpage. You can manually extract this if you want to create a stand-alone userstyle to manually tweak the look.
