Skip to main content

zainjaffal
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!
Categories:
TLDR
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 “https://online.manchester.ac.uk/*”

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:

bbb


More Coverage

Fake papers in research: When science lies

Nature revealed last year that 2% of scientific papers – tens of thousands – are not as true as you’d think they are. Hannah looks into the situation at hand

Science in the news: Sleepy penguins, record-breaking icebergs and the end of wine fraud

An AI sommelier, a remarkable sleeping habit and a giant iceberg are all covered in these stories of science in the news

Flying Green: The first transatlantic flight using 100% sustainable fuel jets off

The first transatlantic flight run on 100% sustainable fuel ran at the end of last year – it could be the start of more environmentally friendly travel

The rise of designer DNA: Yeast as a model organism

Researchers, including teams from the University of Manchester, have produced yeast with over 50% artificial genome