Browsing in the dark with Vimium and Dark Reader

2-minute read
Ragnar Groot Koerkamp
devops linux
Table of Contents

Let’s quickly go over some settings you can change for a better dark mode experience in Chromium.

Chromium theme

First of all, you can make Chromium itself use a dark theme. This will ensure both a dark tab bar and nice dark settings pages. As explained here, you’ll need to change the following:

  • Run chromium with the flags

    1

    chromium --enable-features=WebUIDarkMode --force-dark-mode

    If you are already using other feature flags, they can be comma separated:

    1

    --enable-features=UseOzonePlatform,WebUIDarkMode

  • In the browser settings, make sure the Theme (under Appearance) is set to Classic.

Dark Reader

Dark Reader is the extension of choice for inverting web pages. I’m currently using the Dynamic theme.

You can bind keyboard shortcuts to toggle the extension and to enable/disable the extension on specific sites.

Vimium

Figure 1: Dark vimium on top of an inverted webpage.

Figure 1: Dark vimium on top of an inverted webpage.

Vimium adds Vim-like bindings to Chromium.

Currently there is an issue where it shows a big bright white box when using the dark theme on GitHub. As indicated in this comment, the fix is to clone the vimium repo and edit the file content_scripts/vimium.css by adding the following at the end:

1
2
3

.vimiumUIComponentVisible {
  color-scheme: light;
}

Then install Vimium from source using the instructions here.

To algo get rid of the white omnibar, I’m using the Simply Dark theme. Simply copy the contents of the css file into the CSS for Vimium UI field in the advanced vimium options. To get rid of the animations, delete the animation: in the #vomnibar block and the @keyframes show block right below.