How to put your favourite websites into dark mode

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.

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/

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

Here’s a preview of my results: