The Wayback Machine - https://web.archive.org/web/20201130093507/https://github.com/laurent22/joplin/issues/2689
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make menu bar black with dark themes #2689

Open
laurent22 opened this issue Mar 8, 2020 · 15 comments
Open

Make menu bar black with dark themes #2689

laurent22 opened this issue Mar 8, 2020 · 15 comments

Comments

@laurent22
Copy link
Owner

@laurent22 laurent22 commented Mar 8, 2020

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

image

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
Copy link
Contributor

@RedDocMD RedDocMD commented Mar 8, 2020

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

@RedDocMD
Copy link
Contributor

@RedDocMD RedDocMD commented Mar 8, 2020

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
Copy link
Contributor

@Rahulm2310 Rahulm2310 commented Mar 11, 2020

@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
Copy link
Owner Author

@laurent22 laurent22 commented Mar 11, 2020

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

@Rahulm2310
Copy link
Contributor

@Rahulm2310 Rahulm2310 commented Mar 11, 2020

Okay

@pranavmodx
Copy link
Contributor

@pranavmodx pranavmodx commented Mar 15, 2020

@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
Copy link
Contributor

@kowalskidev kowalskidev commented Mar 22, 2020

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
Copy link

@blairdrummond blairdrummond commented Apr 19, 2020

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

@Rishabh-malhotraa
Copy link
Contributor

@Rishabh-malhotraa Rishabh-malhotraa commented Apr 19, 2020

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
Copy link

@itpropaul itpropaul commented Jul 23, 2020

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
Copy link

@itpropaul itpropaul commented Jul 23, 2020

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

@rahil1304
Copy link
Contributor

@rahil1304 rahil1304 commented Sep 27, 2020

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

@omega3
Copy link

@omega3 omega3 commented Oct 9, 2020

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
Copy link

@elsiehupp elsiehupp commented Oct 10, 2020

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
Copy link

@elsiehupp elsiehupp commented Oct 10, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.