jerrod-lankford / google-voice-desktop-app

An electron shell wrapper around the google voice website
245 stars 36 forks source link

White Keypad and Text Input Box in all Dark Modes - macOS #118

Closed cyberfunk closed 1 year ago

cyberfunk commented 2 years ago

Is it possible to theme the Keypad and Text input box to match the dark theme? In macOS the keypad and text entry box are a blinding white against the otherwise dark backdrop. 1

cyberfunk commented 2 years ago

I answered my own question by inspecting the elements and making changes. If these changes can be made permanent please feel free to use the colors I selected below or insert your own to match your theme. Note I only included the CSS values I added or changed and omitted the rest of the existing CSS properties for each element.

`.dialpad-container[_ngcontent-yjt-c302] { background: #121516; }

.gvPageRoot [_nghost-yjt-c268] .button[_ngcontent-yjt-c268] { background-color: #222425; color: #fff; }

.input-container[_ngcontent-yjt-c302] .input[_ngcontent-yjt-c302] { background: #121516; }

.input-row[_ngcontent-yjt-c302] { background: #121516; }

.gvPageRoot [_nghost-yjt-c302] .call-button[_ngcontent-yjt-c302] { background-color: rgb(71 168 83); color: rgb(255 255 255); }`

cyberfunk commented 2 years ago

End result 2

stevario commented 2 years ago

I would love to see some updates to the dark themes. The white background with white font does make it very difficult to see the number that has been entered. This is what it looks like as you type the number. You can barely see that a number has been typed into the box.

image

This is what it looks like if you select the number after you have typed it into the text field.

image

I know the user cyberfunk was able to modify the CSS to make the background dark. I do not really know how to do that. In the best case... a new release would simply fix the dark themes.

Thanks!

cyberfunk commented 2 years ago

Btw my changes are not permanent. There are User CSS plug-ins for Chrome and Brave browser that would allow you to make changes but they do not work with this standalone app unfortunately. Only the developer can make the changes permanent in an updated release as @steveario requested.

blooalien commented 2 years ago

This same exact issue also exists in the Linux AppImage release as well. I'd be more than willing to fork this and submit a pull request for the fix if anyone wants to turn me on to which specific file I'd enter those CSS changes listed above into. In the meantime, I'ma clone the repo and see if I can find it myself.

Edit: Aighty. Found where to edit the themes. I'ma see what I can do about gettin' a pull request together for this one.

cyberfunk commented 2 years ago

This same exact issue also exists in the Linux AppImage release as well. I'd be more than willing to fork this and submit a pull request for the fix if anyone wants to turn me on to which specific file I'd enter those CSS changes listed above into. In the meantime, I'ma clone the repo and see if I can find it myself.

Edit: Aighty. Found where to edit the themes. I'ma see what I can do about gettin' a pull request together for this one.

Where did you find the themes? I'm using macOS.

blooalien commented 2 years ago

This same exact issue also exists in the Linux AppImage release as well. I'd be more than willing to fork this and submit a pull request for the fix if anyone wants to turn me on to which specific file I'd enter those CSS changes listed above into. In the meantime, I'ma clone the repo and see if I can find it myself. Edit: Aighty. Found where to edit the themes. I'ma see what I can do about gettin' a pull request together for this one.

Where did you find the themes? I'm using macOS.

If you clone the repository and look in the root folder of the project, you'll find a file named THEMES.md that explains the theme stuff. It should make sense to anyone who's familiar with typical modern web design methods involving SCSS/SASS/yarn stuff. I'm still exploring, but I think I can get a proper patch set / pull request thrown together for this using your colors from above as a baseline starting point. I'll just adapt that to the other dark themes by eyedroppering colors out of those other themes.

Also, the README.md file contains some useful info about how to build a local "release" using yarn run commands.

cyberfunk commented 2 years ago

This same exact issue also exists in the Linux AppImage release as well. I'd be more than willing to fork this and submit a pull request for the fix if anyone wants to turn me on to which specific file I'd enter those CSS changes listed above into. In the meantime, I'ma clone the repo and see if I can find it myself. Edit: Aighty. Found where to edit the themes. I'ma see what I can do about gettin' a pull request together for this one.

Where did you find the themes? I'm using macOS.

If you clone the repository and look in the root folder of the project, you'll find a file named THEMES.md that explains the theme stuff. It should make sense to anyone who's familiar with typical modern web design methods involving SCSS/SASS/yarn stuff. I'm still exploring, but I think I can get a proper patch set / pull request thrown together for this using your colors from above as a baseline starting point. I'll just adapt that to the other dark themes by eyedroppering colors out of those other themes.

Also, the README.md file contains some useful info about how to build a local "release" using yarn run commands.

How'd it go with building the custom dark theme?

cyberfunk commented 1 year ago

Thanks so much to the developer for rolling out theme fixes in the latest update!!!