How to Add a User Stylesheet in Firefox

Discussion

1. randomWebDev

   I dont understand the purpose behind this. Why would a user write his own Stylesheet for a Website? To “hide ads”?? Sure, there will be many people who open the debugger, analyse which div holds the ad and write a stylesheet to hide it… not? Adblocker?? Unless you are visting a Website every day and are REALLY displeased with the looks, I just cannot imagine that there is anyone who would bother to do this.
• H

  Lots of people do this because for some, the colors are either bothersome (white may hurt your eyes, or a dark background may be too low contrast to see it clearly). Or if you have low vision, certain types of colorblindness, you might need to add your own colors so you can see the page.
• MMIAngou

  It’s not because you don’t need it that it is useless ; this is a huge feature for accessibility, so :
  – Old person may want the font 200% bigger
  – Custom fonts easier to read for Dislexia
  – Custom colors for colorblind

  And this can apply on all the sites you will visit
• Kaan

  Well I am visiting an API documentation page for a very large multinational shipping company, maybe not every day, but very frequently. It has all sorts of unnecessary headers and useless chrome that makes the actual content difficult to read. After deleting these numerous times usign the inspector I decided to automate this using a user stylesheet. David S.’s comment is also quite relevant:

  https://developer.mozilla.org/en-US/docs/Web/CSS/@document

  It would be useless without a domain specific media query. Also worth noting is that userContent.css is disabled by default in newer versions of firefox so you will have to enble it from about:config

  https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/
• George

  I use a website daily that has a flashing digital clock. For some reason, this very simple animation sucks up a lot of CPU cycles in the browser, and this results in battery drain. By adding a bit of CSS, the animation is disabled and the CPU usage drops dramatically.
• Rob

  Pure white screens give me headaches. Adding some grey is enough for me to avoid headaches. For pages I use all the time it is worth it.
2. David S.

   I once thought user styles couldn’t be limited to a specific domain as well, but then I found this: https://developer.mozilla.org/en-US/docs/Web/CSS/@document

   I’d like to add that there are multiple extensions for Chromium-based browsers (Google Chrome, Opera, etc.) to add user stylesheets in them as well (including Stylus, Stylish, and Stylebot).
3. MMIAngou

   Someone knows the name of this particular Firefox theme ?
4. maxbd

   I’m currently using Firefox 72.0.2.
   The new stylesheets are having no effect.
   Websites continue to load/use their own styles.
   Am I missing some setting or trick to force the use of my own stylesheets using:
   …profile->chrome->userContent.css
   …profile->chrome->userChrome.css?
• Craig

  All styles must have !important. Example:

  #elementid {
      width:80% !important;
  }
  
5. Nathan Chappell

   If you’re here and anything like me, you may find the “bookmarklet trick” helpful in conjunction with these user stylesheets. I have a bookmark(let) that, when I click on it, will invert the colors on the screen and set the background, and when I click on it again, sets the colors back to normal.
   Here is the code, which is the “location field” of the bookmark(let). It’s a bit complicated in order to make document hold state, and the precise filter style I apply to html is a bit souped up (my preference determined by some experimentation). Hope it helps:

   javascript: void (function () {
   
     /* some parameters for better viewing */
   
     invert = 90;
     contrast = 120;
     brightness = 105;
     darkBackground = '#ddd';
   
     /* alias the elements we need */
   
     html = document.getElementsByTagName("html")[0];
     body = document.getElementsByTagName("body")[0];
   
     /* my_bookmarklet_state holds some state attached to $document */
   
     if (document.my_bookmarklet_state === undefined) {
       document.my_bookmarklet_state = {
         old_body: body.style.backgroundColor || 'white',
         inverted: false,
       }
     }
     state = document.my_bookmarklet_state;
   
     /* main */
   
     if (!state.inverted) {
       /* apply the inversion */
   
       html.style.filter = invert(${invert}%) contrast(${contrast}%) brightness(${brightness}%);
       body.style.backgroundColor = darkBackground;
       state.inverted = true;
     } else {
       /* undo the inversion */
   
       html.style.filter = "";
       body.style.backgroundColor = state.old_body;
       state.inverted = false;
     }
   })();
   
• Nathan Chappell

  Note that the code tags got converted to… aww fuck. You’ll figure it out.
6. jim

   how do i change the background color of the main page that is opened when i open my firefox browser?