Checkboxes are invisible when using the Suru dark theme

[Flaburgan]

See for example in Unity Tweak Tool:

I just checked out the code for UTTT, looks like it's using the ubuntu touch ui toolkit rather than qt quick controls 2 with suru style

From : ubports/qqc2-suru-style#7 (comment)

[mymike00]

@cibersheep How could we solve this issue?
The problem is that Dialog background is theme.palette.normal.overlay (which with SuruDark is UbuntuColors.inkstone) and the CheckBox one is theme.palette.normal.foreground (which with SuruDark is again UbuntuColors.inkstone)

With Ambiance this does not happes as the Dialog background is "#FFFFFF" and the CheckBox one is UbuntuColors.porcelain

[cibersheep]

I didn't start looking into these yet.
One possible solution would be the border color of the element, so the background still looks like «empty» but improve visibility with the border.

Is it happening as well with ticks on the main layer?

[mymike00]

I didn't start looking into these yet.

Oh, sorry. I didn't want to rush you 😇

Is it happening as well with ticks on the main layer?

No, because the background is usually UbuntuColors.jet, only in Dialogs (and other popups too, I think) the background gets lighter. I think this was made because of contrast with the black dimmed content behind the Dialog..

[cibersheep]

Oh, sorry. I didn't want to rush you 😇

«Au contraire,» happy to address this issue.

Is it happening as well with ticks on the main layer?

No, because the background is usually UbuntuColors.jet, only in Dialogs (and other popups too, I think) the background gets lighter. I think this was made because of contrast with the black dimmed content behind the Dialog..

That's very interesting. I think that whatever we decide, it should go along with the Field/TextArea and those are behaving different as they are thought to «work» on main layer...

I like the flat look of the the TextArea. But as you can see, it behaves different in the Dialog again, as it take normal.field (I'm assuming) which should be the same for the checkboxes

[mymike00]

I think that whatever we decide, it should go along with the TextField/TextArea

I agree

I like the flat look of the the TextArea.

Me too, I prefer the flat look ver the inset one of CheckBoxes

it take normal.field which should be the same for the checkboxes

Mmh, I must say I don't really like the TextField being darker that the background... The easiest thing would be to make darker the background of the Dialog (making it jet) and maybe put a little light grey shadow under it to make it standing a bit more onto the dimmed content behind the Dialog

Or otherwise yeah, making the checkboxes the same style as the textfield would be already better than now...

[cibersheep]

it take normal.field which should be the same for the checkboxes

Mmh, I must say I don't really like the TextField being darker that the background...

I agree. But normal.field «shouldn't» be darker but the same color as the «background» (as in Ambiance). I think is a fault of the theme that in SuruDark raised elements goes jet.

The easiest thing would be to make darker the background of the Dialog (making it jet) and maybe put a little light grey shadow under it to make it standing a bit more onto the dimmed content behind the Dialog

Oh, that would translate Ambiance and SuruDark for the Dialog but it might give the back shadow a more presence... ¿maybe?

Or otherwise yeah, making the checkboxes the same style as the textfield would be already better than now...

It could be the 1st step of standarization :)

[cibersheep]

Mmmhmmm... a mockup looks quite good, to be honest

[mymike00]

But normal.field «shouldn't» be darker but the same color as the «background» (as in Ambiance). I think is a fault of the theme that in SuruDark raised elements goes jet.

With "raised" tou mean normal.overlay (that is, the Dialog background), right? it goes inkstone in SuruDark, jet is normal.background, and normal.field too.

Mmmhmmm... a mockup looks quite good, to be honest

Oh, I didn't mean that, but it looks cool indeed 🤩

I meant something like this (just as an idea, I drew it quickly with gimp...), but yeah I like yours more

[cibersheep]

With "raised" tou mean normal.overlay (that is, the Dialog background), right? it goes inkstone in SuruDark, jet is normal.background, and normal.field too.

I ment the layer but I got that wrong... still get confused with the layers :D

I meant something like this (just as an idea, I drew it quickly with gimp...), but yeah I like yours more

Mmm... I think that's a bit too much

[mymike00]

Mmm... I think that's a bit too much

I didn't mean to make it that flashy, but yeah, I agree with you.

[mymike00]

Do you like this?

[cibersheep]

Yep! I do. Maybe swaping the dark layout between Ambiance and SuruDark? So they have a bit more contrast.
I mean, I like the way it's going :)

[mymike00]

Maybe swaping the dark layout between Ambiance and SuruDark? So they have a bit more contrast.

Sure. It's like that right now because of the color of the page behind the Dialog, and the dimming rectangle being inkstone with some opacity becomes lighter with the light page behind it and darker with the dark page...

Something like jet with Ambiance and inkstone with SuruDark?

Or, like before, pure black with Ambiance and we just make it lighter with SuruDark

[cibersheep]

Something like jet with Ambiance and inkstone with SuruDark?

I like this better. What do you think?

[mymike00]

I like this better. What do you think?

I like it! I'll open a new PR as I forgot to mark it as WIP while we were adjusting the colors and in the meanwhile Rodney merged it 😜

[cibersheep]

So quick? Nice :)