Joplin: Make menu bar black with dark themes

[laurent22]

When using a dark theme, the menu bar stays white:

Instead the app should check the current theme and if it's a dark one, the menu bar should be made black (assuming Electron supports this).

[RedDocMD]

@laurent22 I would like to work on this issue. Please assign it to me.

[RedDocMD]

By the way, Electron does not directly support a dark theme. Rather, we must make the menu bar from scratch and change its colour

[Rahulm2310]

@laurent22 I don’t know if we can change the menu bar color without changing the system UI theme, but we can create a frameless window and build our own menu in our app’s HTML.

[laurent22]

If it means building our own menu, then we'll leave it as it is.

[Rahulm2310]

Okay

[pranavmodx]

@laurent22, Please correct me if I am wrong, but I think we can easily create a custom menu bar with the help of this package.
There is also an example tutorial on it here.

Keeping all other styling intact, we could just the change the color, according to the theme selected by the user, by passing it as an attribute (backgroundColor) to the function (Titlebar) provided in the package.

If the solution sounds valid to you, I could take this issue up.

[kowalskidev]

I figured it out that the menu bar color is based on our system theme. I have dark theme in my system so in my case menu bar is dark and another thing is Electron doesn't support changes against system theme unless we create our own menu bar which we don't want to! and yes we can detect system theme using Electron which I have implemented for this issue #2665
.

If it means building our own menu, then we'll leave it as it is.

[blairdrummond]

In the interim, is there a way to toggle the menu bar?

[Rishabh-malhotraa]

In the interim, is there a way to toggle the menu bar?

No you have to make a custom title bar, once you make a custom title bar you can pass the theme object and it can be changed according to the theme, till then I don't think so you can

[itpropaul]

For folks that already have a dark system theme as I and still had the white title bar. Try Windows>"Themes and Related Settings">Color>Choose a color like Dark Gray in custom or wherever (it won't let you choose black or even past a certain degree of darkness)>Show accent colors on the following surfaces>Title bars and window borders

[itpropaul]

https://www.npmjs.com/package/custom-electron-titlebar This also may be worth looking into.

[rahil1304]

Hey, is somebody working on this issue or can I take it up?

[omega3]

I also have white menu bar with default dark theme in the latest 1.2.6 appimage on Linux. Please fix it.
https://i.imgur.com/6poyD9b.png

[elsiehupp]

I also have white menu bar with default dark theme in the latest 1.2.6 appimage on Linux. Please fix it.
https://i.imgur.com/6poyD9b.png

I have the same issue on Ubuntu 20.04.1. I had a different thought for addressing it, though: color themes aside, could there be the option to have the title bar and menu bar auto-hide when the window is maximized? I mean, this is the default behavior on macOS, and it would be nice if it were an option on Linux and Windows, as well. (I can create a separate linked issue, if that would help.)

[elsiehupp]

I've been browsing the forums for related issues, and someone made a request to combine the title bar and tool bar like they are in Firefox, macOS Big Sur, and Gnome:

https://discourse.joplinapp.org/t/feature-request-add-support-for-integrated-menu-bar-beneficial-to-all/10264/4