Darkmode for Mongodb Compass!

README.md

Introduction

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!

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:

   DarkReader.enable({
       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 :)

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

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 :)

Topnotch! thanks for saving our eyes!

Bruh the beta version (1.30.0) already has darkmode theme

Thanks for Sharing 😊.

This saved my eyes 👀

didnt work for me 😢

@soulninja-dev The Dark Theme is already included in the latest MongoDB Compass (version 1.30.1), under View > Theme
https://www.mongodb.com/try/download/compass

Many thanks on this.

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

np!

I wanna change color of dark theme

@Dmonster-ok you can try playing with the parameters for the enable function to get what suits you best.