Jump to content
Phishing Emails & YouTube Messages - Fake Giveaway Read more... ×
Search In
  • More options...
Find results that contain...
Find results in...
Damikiller37

Project Lights Off - Making websites dark one by one

Recommended Posts

Posted · Original PosterOP

Here is some music as you read through this guide :)LINK

 

banner.jpg

 

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:

 

chrome-32.png Google Chrome

Spoiler

 

Step 1 

Chrome%201.jpg

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

the "ADD" button.

 

 Step 2 

Chrome%202.jpg

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 

Chrome%203.jpg

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 

Chrome%204.jpg

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 

Chrome%205.jpg

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.

 

 

firefox-icon.png Mozilla Firefox

Spoiler

 

 Step 1 

Firefox%201.jpg

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 

Firefox%202.jpg

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 

Chrome%203.jpg

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 

Firefox%204.jpg

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 

Firefox%205.jpg

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.png Opera

Spoiler

 

 Step 1 

Opera%201.jpg

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

 

 Step 2 

Opera%202.jpg

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 

Chrome%203.jpg

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 

Opera%204.jpg

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 

Opera%205.jpg

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-icon-32.png Maxthon

Spoiler

 

 Step 1 

1.jpg

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

the "Install" button.

 

 Step 2 

2.jpg

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 

Chrome%203.jpg

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 

4.jpg

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 

5.jpg

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 

 

Game-diamond-icon.png 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.

Night%20mode.jpg

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 Game-diamond-icon.png

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 Game-diamond-icon.png

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

 

 MyAnimeList Game-diamond-icon.png

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

 

 Dropbox Game-diamond-icon.png

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 :)

Link to post
Share on other sites

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). 


CPU: Intel 3570 GPUs: Nvidia GTX 660Ti Case: Fractal design Define R4  Storage: 1TB WD Caviar Black & 240GB Hyper X 3k SSD Sound: Custom One Pros Keyboard: Ducky Shine 4 Mouse: Logitech G500

 

Link to post
Share on other sites
Posted · Original PosterOP

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.

Link to post
Share on other sites

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


Are you new? Please read CoC  Before posting! PLEASE SELECT 'AUTOMATIC' FOR FONT COLOR FOR US DARK THEME USERS (Only for dark shades)If you can read this, it means you need to change to NIGHT THEME (bottom left above LMG logo) Please follow your threads and Quote people when replying to them. Mark your problem as solved if answered. Don't spam, nobody likes a spammer. DO NOT QUOTE IMAGES! BE NICE!

Link to post
Share on other sites

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

 

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


Like watching Anime? Consider joining the unofficial LTT Anime Club Heaven Society~ ^.^
Open Giveaways: None at the moment!
Closed Giveaways: [Giveaway #1]LTT Forum Wide Giveaway | [Giveaway #2]LTT Forum Wide Giveaway | [Giveaway #1]Heaven Society Anime Club Giveaway | [Giveaway #2]Heaven Society Anime Club Giveaway

 

 

Link to post
Share on other sites

I have one for the new linustechtips design :-)

 

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


Hardware: Intel I7 4790K 4Ghz | Asus Maximus VII Hero Z97 | Gigabyte 780 Windforce OC | Noctua NH-U12P SE2 | Sandisk Extreme Pro 480GB | Seagate 500Gb 7200Rpm | Phanteks Enthoo Luxe | EVGA Supernova G2 850W | Noctua NF12 | SupremeFX 2014 | Patriot Viper 3 16GB.

Gaming Gear: Cooler Master TK Stealth | Sennheiser PC350SE | Steelseries Rival | LG IPS23L-BN ' 5ms | Philips Brillians 144hz 

Link to post
Share on other sites
Posted · Original PosterOP

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 :)

Link to post
Share on other sites

Awesome I'll add both to the OP :)

 

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


Hardware: Intel I7 4790K 4Ghz | Asus Maximus VII Hero Z97 | Gigabyte 780 Windforce OC | Noctua NH-U12P SE2 | Sandisk Extreme Pro 480GB | Seagate 500Gb 7200Rpm | Phanteks Enthoo Luxe | EVGA Supernova G2 850W | Noctua NF12 | SupremeFX 2014 | Patriot Viper 3 16GB.

Gaming Gear: Cooler Master TK Stealth | Sennheiser PC350SE | Steelseries Rival | LG IPS23L-BN ' 5ms | Philips Brillians 144hz 

Link to post
Share on other sites

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.


BUILD LOGS


Serious Black ] [ 4770k ] [ EK ] [ GRYPHON z87 [ R9 290x [ 16GB @ 1866Mhz [ 500GB EVO [ 6TB Barracuda [ 760w 80+ Plat [ 350]


[ Project Lumos ] [ G3258 H100i ] [ GRYPHON z87 ] [ R9 270 ] [ 8GB @ 1866Mhz ] [ 250GB EVO ] [ 500GB WD Black ] Core 1300 ]

Link to post
Share on other sites
Posted · Original PosterOP

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 :)

Link to post
Share on other sites

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.


Intel Core i7 4790k - 16 GB RAM - Nvidia GTX 970

Link to post
Share on other sites

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.

Link to post
Share on other sites

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. 


CPU: Intel 3570 GPUs: Nvidia GTX 660Ti Case: Fractal design Define R4  Storage: 1TB WD Caviar Black & 240GB Hyper X 3k SSD Sound: Custom One Pros Keyboard: Ducky Shine 4 Mouse: Logitech G500

 

Link to post
Share on other sites

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 :/

Link to post
Share on other sites

@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)


n0ah1897, on 05 Mar 2014 - 2:08 PM, said:  "Computers are like girls. It's whats in the inside that matters.  I don't know about you, but I like my girls like I like my cases. Just as beautiful on the inside as the outside."

Link to post
Share on other sites
Posted · Original PosterOP

@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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Buy VPN

×