Dark theme issues

[Symbai]

1. WPF's GridSplitter is not themed
   
2. Selected/Active TabControl header foreground color is probably too dark. Its kinda hard to read. I think it would be better if its get the light blue color background as in bottom right (Title4) but as foreground
   

Nuget version: 3.2.0 but you can also repro in master branch.

[NaBian]

@ghost1372 what do you think?

[Yopler]

If I propose my point of vue :
I have the same feeling concerning the dark mode, color are too saturated (not sure that the right word 😅). The most obvious exemple is to read the code example in the demo :

In design, if you have a dark mode, color are useally less saturated (here again not sure of the word), like pastel. The goal is to have less agressiv colors for the user.
Here an extreme exemple :

[Yopler]

@NaBian do you have a design system for Handy Control ?

[ghost1372]

hmm....
how about this?

or this

[ghost1372]

@NaBian do you have a design system for Handy Control ?

look here
https://ant.design/components/tabs/

[Yopler]

Nice, You use ant design ! For Dark Mode, look https://ant.design/docs/spec/dark#Design-Principles.
You can try the level 8 of the color ! like the blue-8 : #65b7f3

Of course, you don't need to have the same color as Ant Design. But in that case, I think you need to have a Graphic Charter. 😄😉

[NaBian]

If I propose my point of vue : I have the same feeling concerning the dark mode, color are too saturated (not sure that the right word 😅). The most obvious exemple is to read the code example in the demo :

In design, if you have a dark mode, color are useally less saturated (here again not sure of the word), like pastel. The goal is to have less agressiv colors for the user. Here an extreme exemple :

update latest code, and you will see:

[ghost1372]

@NaBian can we change PrimaryBrush (Dark theme) for all controls? or we should only change for tabcontrol?

[NaBian]

for all controls, of course, while we should use blue-6 not blue-8

[ghost1372]

for all controls, of course, while we should use blue-6 not blue-8
They do not differ much😕

[NaBian]

we don't have designers. let's do what they say 😆 .

[Symbai]

hmm.... how about this?

Much better thank you. This was also a possible solution I thought of since the selected tab is underlined. I also thought about reporting the watermark of textboxes is hard to read. But I figured out it is also on light/white mode hard to read. In my opinion it could be the same color as the disabled textbox (disabled textbox is still different because the of the different border color).

[Yopler]

update latest code, and you will see:

Oh Beautiful 🤩
But the fact is that you have only change the color of the Code (https://github.com/HandyOrg/HandyControl/tree/master/src/Shared/HandyControlDemo_Shared/Resources/xshd) But not for the whole dark mode !

[Yopler]

for all controls, of course, while we should use blue-6 not blue-8

Here folowing rule for contrast in design. It is here call for web but it can apply to software because this rules apply for any computer screen. Here your contrast is 4.38 . That's a little low 😅

Web Content Accessibility Guidelines (WCAG) :
Regarding colors, the standard defines two levels of contrast ratio: AA (minimum contrast) and AAA (enhanced contrast).
The level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text.
The level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text or bold text.

[Yopler]

I was using a color contrast checker to test the colors blue-6 and blue-8 :
Here the blue-8 :

and here the blue-6 :

my point here, is that color used in color.xaml and colorDark.xaml are the same :

• PrimaryColor : #326cf3
• Danger color : #db3340
• Warning color : #e9af20
• Info Color : #e9af20
• SuccessCOlor : #2db84d

Background color like for button can stay the same but text color should change to follow contrast rule. Here for Tab you use the PrimaryColor and not the PrimaryTextColor.

[ghost1372]

level 8 color is good for tabs but not good for datagrid

level 8

But level 7 looks good

level 7

[Yopler]

level 8 color is good for tabs but not good for datagrid

level 8

But level 7 looks good

level 7

Yes , that what I was explaining. The color contrast is is about Text on background !
The fact here, is that the Tab is Text and you use a background color.
In your datagrid , the constrast is wrong because your blue-8 is your background (was text color / foreground in Tab) and your text is White

[Yopler]

When I got a little of time, I can try to make a figma for a graphic charter. It is not my profession, i have already done it sometimes for personnal project and for fun. I can try 🤔🤷‍♂️