TTL title bar should follow Windows colors

[araujoarthur0]

Describe the current limitation
The TTL title bar is currently still white, while my App and system is in Dark mode. It would be great to have it also follow Windows colors like other native apps do.

If it matters, I installed using the stable .exe instead of the .msi as it didn't work.

Version: 2.0.1
Electron: 11.1.1
Chrome: 87.0.4280.88
Node.js: 12.18.3
OS: Windows_NT ia32 10.0.22623

[thamara]

Does it make a difference if installing vs. building locally?
Anyway, I found this, which may be helpful: https://github.com/AlexTorresSk/custom-electron-titlebar

[araujoarthur0]

Does it make a difference if installing vs. building locally?

I don't think it does.

[araujoarthur0]

Found a way to do a very VSCode-like title bar without any extensions: https://github.com/binaryfunt/electron-seamless-titlebar-tutorial
Adding the good-first-issue if it's mostly to follow a tutorial.
Consider if this should be windows only. I don't know how VSCode does in Mac.

[The-Gammelier]

Hello,

If this issue is still open, I would like to take a crack at it (as it'd be my first issue with an open-source project).

[araujoarthur0]

Thanks @The-Gammelier, just assigned it to you. Feel free to ask us if any questions come up.

[The-Gammelier]

I have run into a couple issues.

When running npm run lint-fix, I get an error for css/styles.css:

The first three are from following the tutorial, the last one is from previously existing code.

Next up, I have successfully implemented a custom title bar and working buttons, however setting the BrowserWindow frame to false removes the menu options from the window. I am unsure how to get those back while keeping the new custom title bar.

Finally, when scrolling down in the app, the month display will overflow onto the new title bar. I am also unsure how to fix that.

[The-Gammelier]

When looking for solutions to the above issues, I've found an article about electron being able to use light/dark/system settings natively. This may be a possible solution rather than making a custom title bar, however this is my first time working with electron and I'm not quite sure how to go about implementing this to see if it would work as the app checks for themes in several files/functions.

https://www.electronjs.org/docs/latest/tutorial/dark-mode

[The-Gammelier]

I've figured out a solution to the table-header overtaking the custom title bar. I'm still working on how to get the menu options to come back up.

[araujoarthur0]

When looking for solutions to the above issues, I've found an article about electron being able to use light/dark/system settings natively. This may be a possible solution rather than making a custom title bar, however this is my first time working with electron and I'm not quite sure how to go about implementing this to see if it would work as the app checks for themes in several files/functions.

https://www.electronjs.org/docs/latest/tutorial/dark-mode

The tutorial is not really clear on the automatic opt-in for native interfaces. Perhaps it's only for MacOS?

[araujoarthur0]

I've figured out a solution to the table-header overtaking the custom title bar. I'm still working on how to get the menu options to come back up.

Maybe there's a java script event being triggered that removes the menu options? You could try playing around with the watcher and debugger in DevTools.

[ghost]

Hi, is anyone still working on this issue? I would like to give this a try.

[tupaschoal]

I don't think anyone is @iknowtalha , feel free to take it.

[ghost]

ok

[teezBlaze]

Hello, is anyone still working on this issue?
Just tried myself locally, and I think it's almost done. Just needed to do some finishing. See the attached video.

20230427_172216.mp4

[tupaschoal]

I don't think anyone is working on it @teezBlaze

[teezBlaze]

@tupaschoal Then, please do assign this to me.

[teezBlaze]

I was able to change the theme color of the title bar.

[teezBlaze]

Now have to bring back the menu bar. Before that I have few questions.

1. Where should I add the title bar codes?

Currently I added the codes in a titleBar.js file and added the script tag directly into the index.html. See the below image for reference.

Or, should I put the codes in any other place @tupaschoal ?

[Bkmakwana2002]

Is this issue open? if yes I would like to take it. Since it is my first time contributing to open source.