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

POG

nob coder x the d

pojjers momento

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

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

Can you elaborate your problem?

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

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

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

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 README.md
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

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

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

@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!