Skip to content

Instantly share code, notes, and snippets.

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

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

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

@Assassin-1234
Copy link

Assassin-1234 commented Oct 22, 2021

POG

@face-hh
Copy link

face-hh commented Oct 22, 2021

nob coder x the d

@NightMasterX
Copy link

NightMasterX commented Oct 22, 2021

pojjers momento

@sunset1234321
Copy link

sunset1234321 commented Nov 15, 2021

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

@Rachniotov
Copy link
Author

Rachniotov commented Nov 17, 2021

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

Can you elaborate your problem?

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

@Rachniotov
Copy link
Author

Rachniotov commented Dec 2, 2021

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

@thomasdrouin
Copy link

thomasdrouin commented Dec 7, 2021

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

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

@Rachniotov
Copy link
Author

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!

@pavelk
Copy link

pavelk commented Dec 13, 2021

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

@pavelk
Copy link

pavelk commented Dec 13, 2021

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

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

@arashseyedi
Copy link

arashseyedi commented Dec 23, 2021

Topnotch! thanks for saving our eyes!

@0wx
Copy link

0wx commented Dec 27, 2021

Bruh the beta version (1.30.0) already has darkmode theme

@harrykanani
Copy link

harrykanani commented Jan 10, 2022

Thanks for Sharing 😊.

This saved my eyes 👀

@SoulNinja-dev
Copy link

SoulNinja-dev commented Jan 16, 2022

didnt work for me 😢

@arashseyedi
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
https://www.mongodb.com/try/download/compass

@SymonBlazejczakPXL
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.

@i-zanis
Copy link

i-zanis commented Jan 28, 2022

Many thanks on this.

@JosueJMartinez
Copy link

JosueJMartinez commented May 20, 2022

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

np!

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