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

In conversation with The Lion King’s Head of Masks and Puppets

The Mancunion was fortunate enough to attend an Insight Session at the Lyceum Theatre and sit down with The Lion King’s Head of Masks and Puppets Joseph Beagley to learn more about the science behind his craft

AI learns its first words (and helps explain how humans acquire language)

How do we learn to associate specific objects with specific words? A team from New York University have developed an AI ‘baby’ to help us answer this question.

Can algorithms help you live a better life?

As the term drags on and student loans dwindle, many students start to feel unmotivated and unsatisfied with their lot in life. Could computer algorithms help you get back on track?

Killing consumerism: Are we headed to disposal doom?

In his keynote presentation, Professor Mark Miodownik deliberates on the perils of consumerism, how we might manage to bring it to a sustainable future, and its obsolescence