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

TTL title bar should follow Windows colors #879

Open
araujoarthur0 opened this issue Oct 20, 2022 · 21 comments
Open

TTL title bar should follow Windows colors #879

araujoarthur0 opened this issue Oct 20, 2022 · 21 comments
Labels
enhancement New feature or request good first issue Good for newcomers windows Issues specific on Windows

Comments

@araujoarthur0
Copy link
Collaborator

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.

image

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

@araujoarthur0 araujoarthur0 added enhancement New feature or request windows Issues specific on Windows labels Oct 20, 2022
@thamara
Copy link
Owner

thamara commented Oct 22, 2022

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

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

I don't think it does.

@araujoarthur0
Copy link
Collaborator Author

araujoarthur0 commented Oct 25, 2022

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.

@araujoarthur0 araujoarthur0 added the good first issue Good for newcomers label Oct 25, 2022
@The-Gammelier
Copy link

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

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

@The-Gammelier
Copy link

I have run into a couple issues.

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

image

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.

image

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.

image

@The-Gammelier
Copy link

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

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

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

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

ghost commented Feb 8, 2023

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

@tupaschoal
Copy link
Collaborator

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

@ghost
Copy link

ghost commented Feb 15, 2023

ok

@tupaschoal tupaschoal assigned ghost Feb 17, 2023
@teezBlaze
Copy link

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

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

@teezBlaze
Copy link

@tupaschoal Then, please do assign this to me.

@teezBlaze
Copy link

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

@teezBlaze
Copy link

teezBlaze commented May 15, 2023

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.
1
Or, should I put the codes in any other place @tupaschoal ?

@Bkmakwana2002
Copy link

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

@career-yashaswee
Copy link

If this issue is still open, I would love to work on it. I have recently started contributing to open source.

@thamara
Copy link
Owner

thamara commented Oct 13, 2024

Hi, this is being handled in #1080. Thanks anyway!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers windows Issues specific on Windows
Projects
None yet
Development

No branches or pull requests

7 participants