Darkmode rendering for websites is one new major discipline of frontend development. Users appear to honor this development and enjoy the dark- and light-mode preferences on websites. Getting websites to load using a dark themes on windows desktop machines running chrome is significantly harder than configuring dark mode preferences on phones etc. That’s why I will walk you through it with this tutorial.
Intro to darkmode – what is it?
Generally speaking darkmode describes an inverted display of color-combinations on websites. Instead of having black text, typically rendering on a white / light background, a website in darkmode will usually display content using white text on black / dark backgrounds. This way of displaying content is a lot less bright (because of the large dark backgrounds) and sometimes is attributed with a better reading experience – especially at night or in bed without any additional external lighting. A lot of famous websites currently offer a darkmode option for their websites / appps. Among them are: 9gag, The Economist, Google (Search, Youtube & Discover), Android, Kindle app and many more …
There is multiple ways / levels to signal a website you want it displayed in a dark theme. Depending on your system setup and device you can configure darkmode via
- in-app preferences
- browser settings
- operating-system settings.
This means some websites are able to detect your Android- or MacOs Settings. The Setup of a Darkmode preference in Google Chrome running a Windows operating system is not an easy or intuitive thing to achieve – that’s why I wrote this little tutorial.
How to setup Darkomode for Google Chrome on Windows
The overall objective is adding the following postfix
- force-dark-modeto the shortcut(s) you use to start Google Chrome on your PC. Like so:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" – force-dark-modeIf you already know what to do based on these 2 lines of code – good for you. For all the others: You follow along, it won’t be as hard as it might look!
Make sure you know which shortcuts you use to open Chrome. There are usually multiple options like:
- Taskbar
- Desktop-Icon
- Windows Startmenu Navigation
- Tray-Icon
1 | Open the Properties of a Chrome shortcut (Windows 10)
This example adresses the opening of Chrome from the taskbar. Right-click the icon in the taskbar. You will see a context menu opening up above the icon. Right-click again: This time on the line within the context menu labeled Google Chrome. Another context menu will open up to right.
Now use a left-click to click on the Properties label at the bottom.
A new window listing a lot / all of Google Chrome’s System Properties in Windows.
Showing a desktop shortcut’s properties is a little easier. Here you only need to right-click the desktop icon once and you can navigate to the Properties window afterwards.
2 | Edit Chrome Shortcut path – Force Darkmode
From the default properties screen you need to use the tab navigation (at the top) to pick the Shortcut screen. You will see a form field labeled Target: which you need to edit in the next step.
Usually this form field contains text starting with something like
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"or some other content that resembles a file path. This path points towards the location of your Chrome installation on your local disc. You now need to add some text after the existing content:
- force-dark-modeBe aware that the first and third character of this line of code are spaces – it’s supposed to be like that. Do not edit / remove anything from the existing file path. The final result should look something like this:
"C:\Intall-Path\chrome.exe" – force-dark-mode
3 | Save settings and restart Google Chrome
To finish up click the Apply button within the properties window and OK afterwards. Be aware that there won’t be any immediate changes in your Chrome tabs in case you had the program running during this procedure. To see changes in the Google Chrome interface you first need to close every Chrome tab and the program itself and then restart it using the shortcut icon you edited! After following these instructions you will see the Chrome window open in a new color combination. Wow!
Why not just use a dark Google Chrome Theme from the Chrome App Store?
Some of you may want to point out that you could just get a dark Chrome theme from the Chrome App Store to avoid tweaking system settings. To which I reply: It’s not the same. The native darkmode is less error-prone and a lot more consistent throughout the interface. While most themes mainly touch the surface of views, using the settings I also get darkmode in views like:
- Chrome Console / Developer Tools
- Chrome Settings
- Downloads View
- Browser History Overview
Some themes also produce issues whenever the underlying browser interface is updated with new visual features the theme does not yet have styling prepared for. I imagine that’s how my download-bar in Chrome ended up displaying dark grey texts on dark grey background in my last theme.
On additional note: I recently saw how Google Chrome determines your color schema running on MacOS. In this constellation Chrome just takes the preference from the OS which I think is pretty cool. This might be good feature for upcoming Chrome-on-Windows releases.
Why am I currently this focused on darkmode? I hope you will get to see in the next blog entries.
