Quick dark mode hack

[mmarcon]

Description

Given that dark mode is being requested a lot, I was wondering if it could be hacked together quickly. I stumbled upon https://github.com/darkreader/darkreader and it turns out that if are willing to accept that the result won't be a perfect color palette, we can do dark mode with just a few lines of code.

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

• How do we toggle dark mode on and off?

Dependents

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

Screenshots

[jirikrepl]

[durran]

How do we switch between the two modes?

[mmarcon]

Chatted with @fredtruman about this. We thought we'd add a "toggle experimental dark mode" somewhere in the OS menu (e.g. under View) and set a global class we could use in some plugins to tweak some specific styling, e.g. the sidebar bg color.

However, I just realized darkreader.enable() throws several exceptions in the console because it's trying to call fetch() on a bunch of files using the file:// protocol, which breaks CORS. try/catch does not seem to help and passing node-fetch as the default fetch for darkreader does to help either as it does not like file://. This makes it a bit trickier than expected.

[jirikrepl]

Hi, it would be nice if someone can pick this up and finish it. Dark mode would be really great!

[janos-r]

Can't this be shipped as a plugin to toggle? I use darkreader all the time and I thought about this already in the past. Please add it to the official release so I can use it! You can add "(experimental)" to it or something. But it seams like a great compromise when not possible to ship a custom mode. This is the only app I have to run in light mode in my office, I have no idea why this was not a priority sooner.

[blueedgetechno]

Is it too much to ask for?

[TheSeriousProgrammer]

guys who know electron a bit , just unpack the app.asar add the darkreader.js file , put a script tag in html which points to darkreader.js

and add the following lines to darkreader.js in the end of file

function toggleDarkMode(){
    if(!DarkReader.isEnabled()){
        DarkReader.enable({
            brightness: 100,
            contrast: 90,
            sepia: 10
        });
    }else{
        DarkReader.disable();
    }
}

repack , then replace it with old app.asar

restart compass

Then in the menu bar , click View>Toggle Dev Tools
in the console just type toggleDarkMode();

That's the work around I'm going for..
While we wait for this pull request , this can be a quick work around max 15 mins I guess

Since most mongodb users have some basic understanding in javascript , this shoudl be easy

Edit: This is how my console looks after the workaround

Just ignore the corss errors , it doesnt affect anything I have used till now

[jirikrepl]

I forked the project and added darkreader package
I added menu items to enable/disalbe darkmode.

I don't know the codebase well so I just put the ipc handlers into index.js
Maybe someone can improve on this and create proper PR

I used 1.28-release as a base branch, so I can build a stable app and use it for myself
jirikrepl@8cd4952

---

UPDATE!!!

I created this PR #2444
It allows to window header to have dark/light mode based on OS theme

[mmarcon]

Done in #2582.