Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Darkmode for Mongodb Compass!


So I used Mongodb Compass for a little time a few months ago and then i switched to another mongo client gui for the sole reason, Darkmode. That mongo client was good but recently it became paid. I then switched back to Compass but my eyes couldnt take it 😩

Then I spent some time researching what could I do to make compass darker and easier to read and I found this npm package for the Darkreader chrome plugin. I knew that compass was made in Electron as it had .asar files in its source, that means I could easily implemt that npm package into the Electron app.

Here is the result! preview

How to

make sure you have latest NodeJS and NPM installed on your machine

The following steps would be for linux but replicating it on windows would be easy too

  1. First locate the directory where MongoDb Compass is installed, in my case it is /usr/lib/mongodb-compass, cd into the resources directory

  2. run npx asar extract app.asar dest_dir

  3. Add a new JavaScript file in dest_dir/src/app (dest_dir/build for MacOS) called darkreader.js (you change the name too) and paste the contents of this file inside it. append these lines of code at the very end of the file:

        brightness: 100,
        contrast: 90,
        sepia: 20

    you can ofc play with these values to get the taste you want.

  4. find an index.html in the same directory and add the following lines just before </body>:

    <script src="darkreader.js" charset="UTF-8" async></script>
  5. save all the changes then cd into dest_dir run npx asar pack . app.asar, this will pack the code back into an .asar file

  6. Backup the app.asar inside /usr/lib/mongodb-compass/resources and then run mv app.asar /usr/lib/mongodb-compass/resources

  7. Restart Compass and enjoy the theme :)

Copy link

Assassin-1234 commented Oct 22, 2021


Copy link

face-hh commented Oct 22, 2021

nob coder x the d

Copy link

NightMasterX commented Oct 22, 2021

pojjers momento

Copy link

sunset1234321 commented Nov 15, 2021

not work for window zip .........

Copy link

Rachniotov commented Nov 17, 2021

not work for window zip .........

Can you elaborate your problem?

Copy link

JosueJMartinez commented Dec 1, 2021

OMG my eyes thank you so much! I was able to get it to work via windows. Only thing different I had to do was this command.
npx asar unpack app.asar dest_dir to
npx asar extract app.asar dest_dir

Copy link

Rachniotov commented Dec 2, 2021

Ah my bad but thanks @JosueJMartinez for pointing this out! really appreciate it.

Copy link

thomasdrouin commented Dec 7, 2021

Genius! For me the src/app folder was directly called build folder. Thanks again!

Copy link

pavelk commented Dec 12, 2021

On Mac, there is no folder named src in dest_dir.
Do you have any suggestions?

(base) pavelkrusek@Pavels-MBP dest_dir % ls -la
total 2320
drwxr-xr-x  17 pavelkrusek  staff      544 Dec 12 15:19 .
drwxr-xr-x   6 pavelkrusek  staff      192 Dec 12 15:19 ..
-rw-r--r--   1 pavelkrusek  staff      176 Dec 12 15:19 .depcheckrc
-rw-r--r--   1 pavelkrusek  staff       62 Dec 12 15:19 .mocharc.js
-rw-r--r--   1 pavelkrusek  staff       38 Dec 12 15:19 .prettierrc.json
-rw-r--r--   1 pavelkrusek  staff    30607 Dec 12 15:19 LICENSE
-rw-r--r--   1 pavelkrusek  staff     4123 Dec 12 15:19
drwxr-xr-x   6 pavelkrusek  staff      192 Dec 12 15:19 app-icons
drwxr-xr-x  59 pavelkrusek  staff     1888 Dec 12 15:19 build
-rw-r--r--   1 pavelkrusek  staff  1045537 Dec 12 15:19 compass-screenshot.png
-rw-r--r--   1 pavelkrusek  staff    15309 Dec 12 15:19 expansions.yml
drwxr-xr-x  67 pavelkrusek  staff     2144 Dec 12 15:19 node_modules
-rw-r--r--   1 pavelkrusek  staff    43851 Dec 12 15:19 package-lock.json
-rw-r--r--   1 pavelkrusek  staff     4534 Dec 12 15:19 package.json
-rw-r--r--   1 pavelkrusek  staff      106 Dec 12 15:19 tsconfig-lint.json
-rw-r--r--   1 pavelkrusek  staff      156 Dec 12 15:19 tsconfig.json
-rw-r--r--   1 pavelkrusek  staff     4109 Dec 12 15:19 webpack.config.js

Copy link

Rachniotov commented Dec 13, 2021

Hello @pavelk, it's called build folder in OS X (as @thomasdrouin mentioned). Hope this helps, I'll update the gist!

Copy link

pavelk commented Dec 13, 2021

Thank you very much, and sorry, I didn't notice thomasdrouin answer.

Copy link

pavelk commented Dec 13, 2021

@Rachniotov One small detail: on Mac, Compass is located at /Applications/MongoDB
And - thank you for the guide! My eyes are happy :)

Copy link

samcoswymysl commented Dec 21, 2021

Thx ;)
On Windows you edit files in the dest_dir / build folder, you can also edit css files if someone wants to set Compas for their own :)

Copy link

arashseyedi commented Dec 23, 2021

Topnotch! thanks for saving our eyes!

Copy link

0wx commented Dec 27, 2021

Bruh the beta version (1.30.0) already has darkmode theme

Copy link

harrykanani commented Jan 10, 2022

Thanks for Sharing 😊.

This saved my eyes 👀

Copy link

SoulNinja-dev commented Jan 16, 2022

didnt work for me 😢

Copy link

arashseyedi commented Jan 16, 2022

@SoulNinja-dev The Dark Theme is already included in the latest MongoDB Compass (version 1.30.1), under View > Theme

Copy link

SymonBlazejczakPXL commented Jan 19, 2022

@arashseyedi is right, I'm using Compass for my college exam so this came JIT so I don't blind myself the f out.

Copy link

i-zanis commented Jan 28, 2022

Many thanks on this.

Copy link

JosueJMartinez commented May 20, 2022

Ah my bad but thanks @JosueJMartinez for pointing this out! really appreciate it.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment