Project Lights Off - Making websites dark one by one

[Damikiller37]

Here is some music as you read through this guide LINK

 

 

This is a project that I decided to share since I benefit from it and I'm sure others will too. As you can tell from the title I like

having my websites that I frequently visit dark since I already spend many hours in front of a computer on daily basis

and having websites that I spend the most time on dark really helps with the eye strain I usually get and discomfort from

looking at bright websites. To make websites dark you will need a browser plugin called Stylish.

 

 What is Stylish? 

Stylish is a web browser plugin that allows you to customise any websites' CSS file allowing you to change the layout and the

colour of any element found on the website. The plugin uses what is referred to as User styles which are essentially

themes for websites. you can take out irrelevant content, change colours, or completely redesign the entire site. In this case

making any given website dark. Each User style is installed from the userstyles.org website which is then added to the Stylish

plugin and activate on the websites it was designed to work on.

 

 How to install and use Stylish/User styles? 

Stylish is available for Google Chrome, Mozilla Firefox, Opera and Maxthon. Here are guides for each one explaining how to

install Stylish and User styles:

 

 Google Chrome

Spoiler

 

Step 1 

Go to THIS website and click the "+ADD TO CHROME" button. When the popup window comes up click

the "ADD" button.

 

 Step 2 

Now the website you were on should have the "+ADD TO CHROME" button say "ADDED TO CHROME"

and you should see the Stylish icon on the right hand side of the address bar. Clicking on the icon will allow you to see all

of the user styles that you have for the current website (if any). You can also search for user styles for the website

you are currently on by clicking "Find more styles for this site." which will take you to userstyles.org and narrow search

results for your website.

 

 Step 3 

To install a user style that you want all you have to do is click the "+ Install with Stylish" button and the User style

should be added to Stylish. Make sure to click that button not the download now ones since those are adverts.

 

 Step 4 

Go to the website you downloaded the User style for and it should have changed the website. You will see that the

Stylish icon now has a number indicating how many User styles are used on the website you are on and options for

them when you click the icon.  If it didn't work it can be to do with the User style being outdated, not have the right version

of the website that the user style is supposed to apply to (e.g. it has the google.com but not the google.co.uk hence

why google.co.uk wouldn't work and google.com would), someone didn't design the User style correctly or the

website has changed and the User style doesn't look right/appear at all.

 

 Step 5 

If you would like to change anything in the User style that you have installed or create your own,

you can do so by going to your extensions. To get there click the Stylish icon and then "Manage installed styles.".

There you can also update/check for updates on your User styles.

 

 

 Mozilla Firefox

Spoiler

 

 Step 1 

Go to THIS website and click the "+Add to Firefox" button. When the popup window comes up click the "Install now" button.

You may be asked to restart the browser so save all of the tabs you want to keep for later and click "Restart now" on

the pop-up. If there is no pop-up prompting you about restarting your browser you should do it anyway.

 

 Step 2 

You should now see the Stylish icon on the right hand side of the address bar. The icon will light up colourful when

you are on a website that has a User style running on it. Clicking on the icon will allow you to see all of the user styles that

you have for the current website (if any). You can also search for user styles for the website you are currently on by clicking

"Find more styles for this site..." which will take you to userstyles.org and narrow search results for your website.

 

 Step 3 

To install a user style that you want all you have to do is click the "+ Install with Stylish" button and the User style
should be added to Stylish. Make sure to click that button not the download now ones since those are adverts.

 

 Step 4 

Go to the website you downloaded the User style for and it should have changed the website. You will see that the
Stylish icon now is colourful which indicates that you have a User style in use on that page and when you click on the

icon you will see which User styles are in use as well as other options.  If it didn't work it can be to do with the User

style being outdated, not have the right version of the website that the user style is supposed to apply to

(e.g. it has the google.com but not the google.co.uk hence why google.co.uk wouldn't work and google.com would),

someone didn't design the User style correctly or the website has changed and the User style doesn't

look right/appear at all.

 

 Step 5 

If you would like to change anything in the User style that you have installed or create your own,
you can do so by going to your extensions. To get there click the Stylish icon and then "Manage styles...".
There you can also update/check for updates on your User styles.

 

 

 Opera

Spoiler

 

 Step 1 

Go to THIS website and click the "+Add to Opera" button.

 

 Step 2 

Now the website you were on should have the "+Add to Opera" button say "Installed"

and you should see the Stylish icon on the right hand side of the address bar. Clicking on the icon will allow you to see all
of the user styles that you have for the current website (if any). You can also search for user styles for the website
you are currently on by clicking "Find more styles for this site." which will take you to userstyles.org and narrow search
results for your website.

 

 

 Step 3 

To install a user style that you want all you have to do is click the "+ Install with Stylish" button followed by the "OK"

button on the pop-up window and the User style should be added to Stylish. Make sure to click that button not

the download now ones since those are adverts.

 

 Step 4 

Go to the website you downloaded the User style for and it should have changed the website. You will see that the
Stylish icon now is colourful which indicates that you have a User style in use on that page and when you click on the
icon you will see which User styles are in use as well as other options.  If it didn't work it can be to do with the User
style being outdated, not have the right version of the website that the user style is supposed to apply to
(e.g. it has the google.com but not the google.co.uk hence why google.co.uk wouldn't work and google.com would),
someone didn't design the User style correctly or the website has changed and the User style doesn't
look right/appear at all.

 

 Step 5 

If you would like to change anything in the User style that you have installed or create your own,
you can do so by going to your extensions. To get there click the Stylish icon and then "Manage installed styles.".
There you can also update/check for updates on your User styles.

 

 

 Maxthon

Spoiler

 

 Step 1 

Go to THIS website and click the "Install" button. When the popup window comes up click

the "Install" button.

 

 Step 2 

Now you should see the Stylish icon on the left sidebar. Clicking on the icon will allow you to see all of the user styles

that you have for the current website (if any). You can also search for user styles for the website you are currently

on by clicking on the icon in the sidebar and clicking on the "Find styles for this site" button which

will take you to userstyles.org and narrow search results for your website.

 

 Step 3 

To install a user style that you want all you have to do is click the "+ Install with Stylish" button then the "OK" button in

the popup and the User style should be added to Stylish. Make sure to click that button not the download now ones

since those are adverts.

 

 Step 4 

Go to the website you downloaded the User style for and it should have changed the website. If you click on the Stylish

icon in the sidebar you will be able to see all of the User styles that are active on the website you are on.  If it didn't work

it can be to do with the User style being outdated, not have the right version of the website that the user style is supposed

to apply to (e.g. it has the google.com but not the google.co.uk hence why google.co.uk wouldn't work and google.com would),

someone didn't design the User style correctly or the website has changed and the User style doesn't look right/appear at all.

 

 Step 5 

If you would like to change anything in the User style that you have installed or create your own, you can do so by

clicking on the Stylish icon in the sidebar and then clicking the "Manage styles" button. There you can also update/check

for updates on your User styles.

 

 

 Dark User styles and other dark themes 

 

 This icon indicates the User styles created by me. Please leave feedback and any suggestions for those below.

 

 Global Dark Theme 

This theme was suggested by @InfamousHyperstorm and it applies a dark theme to every website you go on

and mostly works fine. Here is the link to the User style: https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark

 

Another alternative suggested by @Earache is an extension called Hacker Vision for Chrome which inverts the

colours on every website which should effectively turn them dark but you will have to deal with odd colours on

links, logos, etc: https://chrome.google.com/webstore/detail/hacker-vision/fommidcneendjonelhhhkmoekeicedej?hl=en-US

 

For Maxthon users, the browser has a Night mode option as pointed out by @spwath. It will work on all websites.

Here is how to enable it:

 

Spoiler

 

Once in the web browser, in the top bar between the Google search box and the Settings cog icon there are icons

for some extensions. There should be a small arrow like this next to those icons and you should be able to bring

up the Night mode icon.

From there you can enable to mode clicking the icon and the small arrow next to it to bring up the drop down menu with

more options.

 

 

 LinusTechTips 

For those that don't know the forum has it's own dark theme. You can enable it by scrolling down to the bottom

and on the left hand side you will fine "Change theme" Click on it then click on "Night Theme".

 

Other addons and alterations for the forum can be found here:

http://linustechtips.com/main/topic/193630-complete-list-of-forum-addons-scripts-apps-etc/

 

 YouTube 

I personally use a plugin called Magic Action (Available for Chrome Firefox and Opera) that has a dark theme

and other useful enhancements for YouTube. To get the dark theme go to the options for Magic Action and scroll

down until you see "Enable Day/Night feature". This will put a switch next to the YouTube logo when you

visit the website and once clicked will enable the dark theme. There are some User styles for YouTube but I've

found that the Magic Action has the best one and is always updated.  

 

 Userstyles website 

Funny enough the website that you can get more user styles for other websites is white itself so here is a user style

I use to make the user style website dark: https://userstyles.org/styles/102028/userstyles-org-nightmode

 

 Twitch 

https://userstyles.org/styles/86891/xigbclutchix-s-dark-twitch-theme

 

 Google 

https://userstyles.org/styles/112421/dark-fusion-google

 

 Facebook 

https://userstyles.org/styles/95359/facebook-dark-facebook-2-a-dark-facebook-theme

 

 Instagram 

https://userstyles.org/styles/115007/instagram-dark-theme-v0-90

 

 Wikipedia 

https://userstyles.org/styles/47161/dark-wikipedia-rounded

 

 SoundCloud 

https://userstyles.org/styles/107360/soundcloud-com-nightmode

 

 PCPartPicker 

https://userstyles.org/styles/110580/pcpartpicker-dark-theme-v0-91

 

 MyAnimeList 

https://userstyles.org/styles/110605/myanimelist-dark-modernized-theme-v0-9

 

 Dropbox 

https://userstyles.org/styles/111814/dropbox-dark-theme-v0-91

 

 Gmail 

To get a dark theme for the Gmail, login to your Gmail and then click on the cog icon found in the top right corner under

your profile picture. Then in the dropdown menu click on Themes. There under the Colour Themes section you

should be able to see Dark. Select it and it should change Gmail to be dark.

 

 

If you know any better User styles for the websites mentioned or for other websites,

feel free to let me know in the comments. I will keep the list update whenever

I make or use a new User style. I hope your eyes will appreciate my effort

[Equilibrium_FOOL]

Nice.

[werto165]

Just what I need, thanks. Have you found a fix for the white web pages in between pages that load in chrome(that's not just putting a black page instead). 

[chutia]

Nice work, well done! Already done something similar for firefox, might try for chrome above aswell.

[Damikiller37]

Just what I need, thanks. Have you found a fix for the white web pages in between pages that load in chrome(that's not just putting a black page instead). 

Yeah I still can't figure it out and I think it just has to be the way chrome renders websites so hopefully Google gets it sorted one day.

[Flight1sim]

HaHa Love the Presentation 10/10!! (music helps )

[Fred Castellum]

This.. I approve of this. Thanks for sharing, following! 

 

I do praise the sun but I also don't want my eyes fried. 

[wolfgang]

this is the next to do for me now. Thank you.

[Rekx]

I have one for the new linustechtips design :-)

 

https://userstyles.org/styles/109705/linustechtips-dark-theme-2015-version

[InfamousHyperstorm]

There is a stylish theme which makes websites dark universally: https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark.

 

You can use this while keeping specifically made ones on certain websites to maximize the black out.

[Damikiller37]

I have one for the new linustechtips design :-)

 

https://userstyles.org/styles/109705/linustechtips-dark-theme-2015-version

 

There is a stylish theme which makes websites dark universally: https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark.

 

You can use this while keeping specifically made ones on certain websites to maximize the black out.

 

Awesome I'll add both to the OP

[Rekx]

Awesome I'll add both to the OP

 

Nice. By the way, awesome project you've created 

[Damikiller37]

Nice. By the way, awesome project you've created 

Since I know it benefits me I though I might as well share it and explain how to do it

[Earache]

I like your idea. I'm currently using Hacker Vision, an extension for Google Chrome–

https://chrome.google.com/webstore/detail/hacker-vision/fommidcneendjonelhhhkmoekeicedej?hl=en-US

 

It essentially inverts the websites color, but it would be nice to customize specific sites further as pink and cyan links aren't always appealing to the eye.

[Damikiller37]

I like your idea. I'm currently using Hacker Vision, an extension for Google Chrome–

https://chrome.google.com/webstore/detail/hacker-vision/fommidcneendjonelhhhkmoekeicedej?hl=en-US

 

It essentially inverts the websites color, but it would be nice to customize specific sites further as pink and cyan links aren't always appealing to the eye.

Yeah I've seen this extention before and I don't really like the inverted colours but still nice for those that don't mind. I'll add it to the list. Thanks

[Epitome]

Thanks for the guide, really appreciate it. 

[SimonWhite]

I like your idea. I'm currently using Hacker Vision, an extension for Google Chrome–

https://chrome.google.com/webstore/detail/hacker-vision/fommidcneendjonelhhhkmoekeicedej?hl=en-US

 

It essentially inverts the websites color, but it would be nice to customize specific sites further as pink and cyan links aren't always appealing to the eye.

 

This is the best thing I've ever seen.

[Satlen]

For the twitch part I would recommend mentioning an add-on called BetterTTV which has an amazing dark mode + more custom stuff that is regularly updated.

[Embattled]

Just what I need, thanks. Have you found a fix for the white web pages in between pages that load in chrome(that's not just putting a black page instead). 

What did you do to fix it? I have the same problem.

[werto165]

What did you do to fix it? I have the same problem.

You can't the only solution is to change browser. It's to do with how chrome renders the webpage, I'm sure that Damikiller37 mentioned it before. 

[Embattled]

You can't the only solution is to change browser. It's to do with how chrome renders the webpage, I'm sure that Damikiller37 mentioned it before. 

I use a chrome extension that fixes it on the LTT forums, but I don't have the software to edit the manifest so I can use it on all sites

[KRImSIN]

Nice! 

[Uwillparish]

maybe ill try this with my website

[spwath]

@Damikiller37

Stylish for maxthon

http://extension.maxthon.com/detail/index.php?view_id=1711

Also, maxthon has a built in extension to make all websites dark (or any colors you want you can make text red, background blue, ect)

[Damikiller37]

@Damikiller37

Stylish for maxthon

http://extension.maxthon.com/detail/index.php?view_id=1711

Also, maxthon has a built in extension to make all websites dark (or any colors you want you can make text red, background blue, ect)

Thanks for letting me know I will add it to the OP with a guide as soon as I have some spare time.