Browsing in the dark with Vimium and Dark Reader

July 2021 2-minute read

Table of Contents

Chromium theme
Dark Reader
Vimium

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

Chromium theme Link to heading

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
Example 1.
chromium –enable-features=WebUIDarkMode –force-dark-mode

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

Example 2.

–enable-features=UseOzonePlatform,WebUIDarkMode

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

Dark Reader Link to heading

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 Link to heading

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.