[Bug] Incorrectly inverted elements in dark theme #1391

Author

Owner

@rustdesk commented on GitHub (Feb 17, 2023):

Agree

@rustdesk commented on GitHub (Feb 17, 2023): Agree

deekerman commented

for 1: https://github.com/rustdesk/rustdesk/blob/master/flutter/lib/desktop/widgets/tabbar_widget.dart#L1109

Author

Owner

@rustdesk commented on GitHub (Feb 17, 2023):

@rustdesk commented on GitHub (Feb 17, 2023): for 1: https://github.com/rustdesk/rustdesk/blob/master/flutter/lib/desktop/widgets/tabbar_widget.dart#L1109

deekerman commented

Author

Owner

@rustdesk commented on GitHub (Feb 17, 2023):

remember me checkbox is incorrect either.

@rustdesk commented on GitHub (Feb 17, 2023): remember me checkbox is incorrect either.

deekerman commented

Author

Owner

@rustdesk commented on GitHub (Feb 17, 2023):

@grummbeer

@rustdesk commented on GitHub (Feb 17, 2023): @grummbeer

deekerman commented

Author

Owner

@rakleed commented on GitHub (Feb 17, 2023):

remember me checkbox is incorrect either.

It's actually all checked checkboxes in dark theme.

@rakleed commented on GitHub (Feb 17, 2023): > remember me checkbox is incorrect either. It's actually all checked checkboxes in dark theme.

deekerman commented

Author

Owner

@rustdesk commented on GitHub (Feb 17, 2023):

checkboxes

@grummbeer fixed it yesterday.

@rustdesk commented on GitHub (Feb 17, 2023): > checkboxes @grummbeer fixed it yesterday.

deekerman commented

Author

Owner

@grummbeer commented on GitHub (Feb 18, 2023):

@rakleed please download a fresh nightly.

I totally agree. There are some more situations which are not covered by the theming. This topic is needing some attention.

The icon of an inactive tab is very dark

i noticed this already

https://github.com/rustdesk/rustdesk/blob/master/flutter/lib/desktop/widgets/tabbar_widget.dart#L1109

thanks, i will have a look.

remember me checkbox is incorrect either.

so bad, your right … but not all

Its a bug, will fix that with unifiying checkboxes and space between input and label.

"One-time password length:" label has too light background

Agree, hate this from the first moment i saw it. There are some downsides:

Anydesk has it, but they have no material design … and only the good things should adopted.
Bad contrast in light, dark, active and inactive mode
Layout shift on hovering (border thickness)
used nowhere else
"set permanent password" ist also a second level option but has not this style
Input field for port is totally different from all other input fields
Complex code for less benefit

@rustdesk if you agree on this, i can make a PR to remove this boxed layout for nested level options.

I already did that a few days ago, because of the UI unification, but was unsure … at many points for me it is not that easy to recognize what is intended and what not form surfing through the codebase.

and 5. GitHub and Okta icons are too dark

Also agree, but i can not fix this at the moment due the lack of knowledge how :-(

@grummbeer commented on GitHub (Feb 18, 2023): @rakleed please download a fresh nightly. I totally agree. There are some more situations which are not covered by the theming. This topic is needing some attention. > The icon of an inactive tab is very dark i noticed this already > https://github.com/rustdesk/rustdesk/blob/master/flutter/lib/desktop/widgets/tabbar_widget.dart#L1109 thanks, i will have a look. > remember me checkbox is incorrect either. so bad, your right … but not all ![login-remember-me](https://user-images.githubusercontent.com/67791701/219855173-6f22dbf8-70c6-4c4e-a745-7203065536b4.png) Its a bug, will fix that with unifiying checkboxes and space between input and label. > "One-time password length:" label has too light background Agree, hate this from the first moment i saw it. There are some downsides: - Anydesk has it, but they have no material design … and only the good things should adopted. - Bad contrast in light, dark, active and inactive mode - Layout shift on hovering (border thickness) - used nowhere else - "set permanent password" ist also a second level option but has not this style - Input field for port is totally different from all other input fields - Complex code for less benefit @rustdesk if you agree on this, i can make a PR to remove this boxed layout for nested level options. I already did that a few days ago, because of the UI unification, but was unsure … at many points for me it is not that easy to recognize what is intended and what not form surfing through the codebase. ![boxed-layout-inactive](https://user-images.githubusercontent.com/67791701/219855657-e4acbf30-9cb6-443e-87f5-d6314805458a.png) ![nested-level-options](https://user-images.githubusercontent.com/67791701/219855664-54422d2b-8678-4a05-ba0e-1214118cab13.gif) > 4. and 5. GitHub and Okta icons are too dark Also agree, but i can not fix this at the moment due the lack of knowledge how :-(

deekerman commented

Author

Owner

@rustdesk commented on GitHub (Feb 18, 2023):

boxed

I believe it is not intended, @21pages could you confirm?

@rustdesk commented on GitHub (Feb 18, 2023): > boxed I believe it is not intended, @21pages could you confirm?

deekerman commented

Author

Owner

@21pages commented on GitHub (Feb 18, 2023):

Intended, but you can change it to look better

@21pages commented on GitHub (Feb 18, 2023): Intended, but you can change it to look better

deekerman commented

Author

Owner

@grummbeer commented on GitHub (Feb 18, 2023):

@21pages Can you explain what the design goal is for that totally different style?

@grummbeer commented on GitHub (Feb 18, 2023): @21pages Can you explain what the design goal is for that totally different style?

deekerman commented

Author

Owner

@21pages commented on GitHub (Feb 18, 2023):

distinguish between main/sub.

@21pages commented on GitHub (Feb 18, 2023): distinguish between main/sub.

deekerman commented

Author

Owner

@grummbeer commented on GitHub (Feb 18, 2023):

True.

What do you think of the "permanent password" situation. This is also a second level option, but has not this boxed style.

I think the reason is that the boxed style does not fit for it, what results in a inconsist visually speech. In my opinion the clear indentation makes already the different in a consist and clean way … for now or as long as a better fitting solution is found. Maybe the whole second level area could have a bit a differnent background? Or something other …

Honestly, please do not understand me wrong, copying the functionality of anydesk is fine, but the design faults should not be adopted. rustdesk is on its way to getting matured and so it has its own (better) design (ideas).

@grummbeer commented on GitHub (Feb 18, 2023): True. What do you think of the "permanent password" situation. This is also a second level option, but has not this boxed style. I think the reason is that the boxed style does not fit for it, what results in a inconsist visually speech. In my opinion the clear indentation makes already the different in a consist and clean way … for now or as long as a better fitting solution is found. Maybe the whole second level area could have a bit a differnent background? Or something other … Honestly, please do not understand me wrong, copying the functionality of anydesk is fine, but the design faults should not be adopted. rustdesk is on its way to getting matured and so it has its own (better) design (ideas).

deekerman commented

Author

Owner

@21pages commented on GitHub (Feb 18, 2023):

couldn’t agree more, I love creative works.

@21pages commented on GitHub (Feb 18, 2023): couldn’t agree more, I love creative works.

deekerman commented

Author

Owner

@rustdesk commented on GitHub (Feb 18, 2023):

@grummbeer go ahead please. i love your work.

@rustdesk commented on GitHub (Feb 18, 2023): @grummbeer go ahead please. i love your work.

deekerman commented

Author

Owner

@rustdesk commented on GitHub (Feb 18, 2023):

#1 is not fixed, because I do not think it is an issue.

@rustdesk commented on GitHub (Feb 18, 2023): #1 is not fixed, because I do not think it is an issue.

deekerman commented

Author

Owner

@rakleed commented on GitHub (Feb 18, 2023):

@rustdesk in the light mode, the contrast ratio is 1.71:1, and in the dark mode it is 1.45:1. So it would be nice if you made the icon brighter in the dark mode.

@rakleed commented on GitHub (Feb 18, 2023): @rustdesk in the light mode, the contrast ratio is [1.71:1](https://webaim.org/resources/contrastchecker/?fcolor=A2CAF1&bcolor=FFFFFF), and in the dark mode it is [1.45:1](https://webaim.org/resources/contrastchecker/?fcolor=1E4163&bcolor=252525). So it would be nice if you made the icon brighter in the dark mode.

deekerman commented

Author

Owner

@rustdesk commented on GitHub (Feb 18, 2023):

What rgb value should be?

@rustdesk commented on GitHub (Feb 18, 2023): What rgb value should be?

deekerman commented

Author

Owner

@rakleed commented on GitHub (Feb 18, 2023):

I think @grummbeer understands this better

@rakleed commented on GitHub (Feb 18, 2023): I think @grummbeer understands this better

deekerman commented

Author

Owner

@grummbeer commented on GitHub (Feb 18, 2023):

I got your point. But i don't know which of the existing colors is the proper one.

What I can imagine is:

With the new logo/brand some nice colors came.

There are two colors with a good distance for light/dark mode
The gradient open a wide range for picking some gradations
All are direct related to the brand
light mode using gradiations from left to right, dark mode vice versa.

A color schema could based of or include them. For example, the light color from the logo could be a candidate for:

the dark mode tab icons (hollow/filled). if so, then all situations with the same purpose make use of this color.
a replacement for teal as secondary color for dark mode.

@grummbeer commented on GitHub (Feb 18, 2023): I got your point. But i don't know which of the existing colors is the proper one. What I can imagine is: With the new logo/brand some nice colors came. ![rustdesk-logo-colors](https://user-images.githubusercontent.com/67791701/219885412-e2a3bcbd-31c1-4dda-8a30-a1f496199a96.png) - There are two colors with a good distance for light/dark mode - The gradient open a wide range for picking some gradations - All are direct related to the brand - light mode using gradiations from left to right, dark mode vice versa. A color schema could based of or include them. For example, the light color from the logo could be a candidate for: - the dark mode tab icons (hollow/filled). if so, then all situations with the same purpose make use of this color. - a replacement for teal as secondary color for dark mode.

deekerman commented