Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upMake menu bar black with dark themes #2689
Comments
|
@laurent22 I would like to work on this issue. Please assign it to me. |
|
By the way, Electron does not directly support a dark theme. Rather, we must make the menu bar from scratch and change its colour |
|
@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. |
|
If it means building our own menu, then we'll leave it as it is. |
|
Okay |
|
@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. 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. |
|
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
|
|
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 |
|
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 |
|
https://www.npmjs.com/package/custom-electron-titlebar This also may be worth looking into. |
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).