Skip to main content

19th February 2021

How to put your favourite websites into dark mode

Find out how to create your own Chrome extension to put any website you want into dark mode!
How to put your favourite websites into dark mode
Photo: Zain Alden for The Mancunion

To excel as a computer science student you need coffee, energy drinks, and dark mode for everything. Coding in dark mode is more effective and you can show off your OLED screen with its true dark colours.

Here I show you some simple ways to make any website into dark mode using everyone’s favourite learning platform, Blackboard, as an example. Give your eyes a break and feel accomplished by trying out some easy programming:

Method 1: Basic:

  1. Go to chrome://flags
  2. Search for Dark Mode
  3. Click Enable

The easiest way and probably the smartest way to do it.

One problem is that this feature is still experimental and not very intuitive. To toggle it on and off you have to reload Chrome every time you toggle dark/light mode and it does it for every website. Easy programming but inefficient.

Method 2: Manually using Chrome plugins:

You can do this on any text editor, such as Notepad, and then insert it into a Chrome plugin. First, create a folder to put everything in and keep organised. Then make a file called “manifest.jsonand”, into which you paste the following code:

Replace URL (in the last line) with your chosen website but don’t delete the star at the end, for example, to work on blackboard you need to use “*”

Next, create the CSS file with the  name styles.css. This set involves a little bit of creativity and some knowledge about CSS, nothing fancy, but here is a small example I wrote for blackboard. This helpful CSS guide can help you out.

CSS Code

Your files should look something like this:

  • Folder (Extension name) (whatever you want)
    • manifest.json (the file in step 2)
    • styles.css (the file that contains the styling actually turning the website dark)

Finally, upload your extension to Chrome, using the link: chrome://extensions/

upload extensions

Choose load unpacked and select the file that contains your extension and you are done!

Here’s a preview of my results:


More Coverage

Long COVID: Can improved sleep cure breathlessness?

A joint study led by The University of Manchester and Leicester has linked disturbed sleep to breathlessness in long COVID patients and proposes possible treatment solutions.

The power of stars: Manchester and its energy revolution

Manchester has long been making waves in the nuclear energy industry – find out how the scientific namesakes of university buildings set in motion a movement towards green energy.

First private Moon landing attempt fails

ispace’s new spacecraft made it within touching distance of the lunar surface, but a last-minute malfunction dashed their hopes of a successful moon landing

AI: Friend or foe?

What is the potential impact of artificial intelligence on the job market, and should students be worried about their future job prospects in light of AI advancements?