Turn every website into dark mode 🌓

Give your eyes a break

We look at screens all the time

When you are working on a computer for a long time a day, you may want to give your eyes a break from time to time in order to prevent headaches, fatigue and so on.

I, for example, have very sensitive eyes and this creates problems when looking at screens most time of the day. Besides working on the computer, we are using our smart phones and watching TV.

White backgrounds are the problem

The biggest problem I have encountered is that most web pages are dominant in the color white. Since the last few years this is taking a turn, more and more websites are providing their own dark mode as well in apps since OLED came out. Unfortunately a lot of websites do not yet provide their own dark mode. That's where Stylish comes in.


Stylish

I couldn't explain better what Stylish is than Wikipedia's words:

Stylish is a user style manager that can change the appearance of web pages in a user's browser without changing their content by including user-supplied CSS style sheets with those supplied by the web site itself.

Stylish provides hundreds of thousands custom made styles, this is where it gets interesting. They have a website called https://userstyles.org/ where people can upload their custom CSS for a particular website. No knowledge of HTML or CSS is required to install a custom theme, you can just browse their website. Both the extension and all styles provided on the website are free.

Wait... This is free? What's the catch?

Yes, everything is free as you go. The catch is that since it's all free the website is extremely slow as well as the extension's function to load recommended styles for the website you're browsing. Because the website is so slow, this function doesn't really work well and therefore it will not be discussed in this article.

Fortunately once you have downloaded the style, the custom CSS is saved in your browser. This means that you do not depend on their website to load your custom style.

You may want to come back later if the site is just too slow at the time. Once you have set up all your styles for your desired websites, you do not need to worry about the speed of UserStyles anymore.

How to install?

First install the extension for your according browser.

When the extension is installed, your browser will bring you to a setup page. Finish the setup by clicking next.

You can now install any Style from UserStyles. Browse for a style and hit the Install Style button. The style will be automatically handled by the extension. All the styles on UserStyles are free to download, so why wait?

Just Dark Modes?

While there are many dark modes available, there are also many custom styles to explore to adjust your favorite website.

You could also hunt for some nice looking minor tweaks just like this one for YouTube:

Nyan Cat YouTube Tweak

Offline custom CSS

You can also add custom CSS that you found somewhere on the internet to your Stylish extension. You're free to use it, you're not bound to their database of custom styles.

  1. Click on the extension icon in your browser and look for the 3 dots and click Create New Style

stylish01-1 userstyles2-1

  1. Make sure you fill in the following things:
  • A name
  • Your CSS code
  • The url your CSS code is applying to

styles3

  1. Hit save and your style should instantly load without refreshing the page.

Update

When your custom style suddenly stops working, chances are that the developer of the website has updated their html and CSS code. Developers on Stylish anticipate by placing an update.

In the Stylish menu you can click the button Check for update in order to install an update if available. You might want to check this from time to time whenever your custom styles aren't working properly anymore.

Backup

When you switch browsers, reinstall your browser or computer, switch computers or you simply have more than one computer you want all your custom styles to be working on, you can simply backup your data and retrieve the backup afterwards.

This can be done by clicking on the Backup all Installed button in the Stylish menu that can be navigated to as seen in the previous steps. It will prompt you to save the backup somewhere to complete.

To restore the backup, simply click on the Retrieve Backup button. It will prompt you to find the backup file, click open to complete.

If you accidently renamed the extension of the file you can simply retrieve the backup by

That's it

Now you know everything there is required to know in order to manage your custom styles. Get creative, support the community and give your eyes that well deserved break!

Extra

My input

I have uploaded a custom style to UserStyles. It's a dark mode for the Google Translate page. Feel free to download it.