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

[Bug]: Office 365 Black theme ribbon needs better colours for disabled etc. #371

Closed
Smurf-IV opened this issue Sep 20, 2021 · 75 comments
Closed
Labels
area:ribbon All issues to do with the ribbon. area:themes All things to do with themes. bug Something isn't working fixed This issue has been fixed. version:90 All things to do with V90.
Milestone

Comments

@Smurf-IV
Copy link
Member

Smurf-IV commented Sep 20, 2021

Disabled text
Disabled Combo's
Unfocused tabs

image

Using 2108.1

@Smurf-IV Smurf-IV added bug Something isn't working area:themes All things to do with themes. labels Sep 20, 2021
@Smurf-IV Smurf-IV changed the title [Bug]: 2108.1 Office 365 Black theme ribbon does needs better colours for disabled etc. [Bug]: Office 365 Black theme ribbon needs better colours for disabled etc. Sep 20, 2021
@Smurf-IV Smurf-IV added the area:ribbon All issues to do with the ribbon. label Sep 20, 2021
@Smurf-IV
Copy link
Member Author

Smurf-IV commented Sep 20, 2021

Also note #237

@PWagner1
Copy link
Contributor

Text colour change... black maybe?

@Smurf-IV
Copy link
Member Author

No, should be white like panel text is

@PWagner1 PWagner1 added the under investigation This bug/issue is currently under investigation. label Sep 20, 2021
@PWagner1 PWagner1 added this to the November 2021 (Version 6) milestone Sep 20, 2021
@PWagner1
Copy link
Contributor

PWagner1 commented Sep 20, 2021

@Smurf-IV Why isn't this being used?

image

@Smurf-IV
Copy link
Member Author

ribbonText is probably not the same as "disabled ribbon label" text ??

@PWagner1
Copy link
Contributor

ribbonText is probably not the same as "disabled ribbon label" text ??

Can I remove it, as it's confusing things?

@Smurf-IV
Copy link
Member Author

No, As ribbonText is probably for the text buttons / or the ribbon group text, or some of the above, or something else..

@PWagner1
Copy link
Contributor

This has been driving me crazy, been trying to alter different values to no avail!

@Smurf-IV
Copy link
Member Author

2 things

  1. Is the Palette designer not helping (I suspect not !)
  2. Agreed, the ribbon stuff is overly complex, but I do not have the time to redo it. (Much like the palette icon usages !)

@PWagner1
Copy link
Contributor

I'll have a look again tomorrow

@PWagner1
Copy link
Contributor

PWagner1 commented Sep 21, 2021

@Smurf-IV Ok, so I've found the code that deals with the disabled text colour, BUT if I change it to white, it'll affect all O365 themes. Should I continue?

image

Edit: I might be able to do a 'hack' based on PaletteMode

@Smurf-IV
Copy link
Member Author

NO, Because "White" is the active colour text for dark themes

@PWagner1
Copy link
Contributor

NO, Because "White" is the active colour text for dark themes

So, what colour should it be?

@PWagner1
Copy link
Contributor

What if I redo it to be like this:

image

@Smurf-IV
Copy link
Member Author

That's the "new" 365 theme from 2020 ish onwards (i.e. flat and boring)
The original theme named 365 in Krypton, is from the original offering in 2018 / 19 time.
But it's black, and flat , and named 365 .. So whatever is easiest (i.e. black and flat on everything except disables and highlighted elements.;-))

@PWagner1
Copy link
Contributor

Unless the ribbon background is black... black, instead of being greyish. It'll definitely make the disabled text more legible, instead in doing a sweeping theme change. Still haven't found where the CB dropdown colours are located. As for #376, I may undo the changes in KMan & start again tomorrow ;)

@PWagner1
Copy link
Contributor

Had a thought... create a special 'Black Theme' base!

@PWagner1
Copy link
Contributor

@Smurf-IV Is this ok?

image

@Smurf-IV
Copy link
Member Author

What is supposed to be disabled, Bright orange is not a disabled colour.

@PWagner1
Copy link
Contributor

What is supposed to be disabled, Bright orange is not a disabled colour.

Umm... difficult to find a colour suitable for a pale greyish background

@PWagner1
Copy link
Contributor

The other option would be to use this: https://paletton.com/#uid=14Y0u0kecqd5bGZ9tv9j8lDnBha

@Smurf-IV
Copy link
Member Author

Make " pale greyish background" a darker background,
then use white as active, and black as inactive / disabled ??

@PWagner1
Copy link
Contributor

Make " pale greyish background" a darker background,
then use white as active, and black as inactive / disabled ??

I'll possibly rename the variable to make it clearer

@giduac
Copy link
Contributor

giduac commented Jun 21, 2024

Enabled state , already known
Disabled state, inverted from the enabled state

one state for controls like textboxes / input controls (light background or so)
one state for things like buttons / images / trackbars... (not so light background)
.....

@giduac
Copy link
Contributor

giduac commented Jun 21, 2024

Added a custom control which hosts a checked listbox
Some ribbon control are not disabled when disabled...

Application_Menu_PRHwTilhU5.mp4

@giduac
Copy link
Contributor

giduac commented Jun 22, 2024

Hi @Wagnerp ,

I've extended the page to give a complete overview.
Via the Listbox themes can be switched and gives the opportunity to see how it looks on other themes. Some themes have fitting settings you can use in 365 Black imo.

I've forked it on my account and you can try it from there (mind the branch):
https://github.com/giduac/Standard-Toolkit-Demos/tree/ribbon-controls-themes-test
Demo Solution: Krypton Ribbon Examples 2022 (Debug) - Nuget
Project: Application Menu 2022
TK: Latest Nightly 169

Application_Menu_FBcACk194r.mp4

@PWagner1
Copy link
Contributor

Hi @Wagnerp ,

I've extended the page to give a complete overview. Via the Listbox themes can be switched and gives the opportunity to see how it looks on other themes. Some themes have fitting settings you can use in 365 Black imo.

I've forked it on my account and you can try it from there (mind the branch): https://github.com/giduac/Standard-Toolkit-Demos/tree/ribbon-controls-themes-test Demo Solution: Krypton Ribbon Examples 2022 (Debug) - Nuget Project: Application Menu 2022 TK: Latest Nightly 169

Application_Menu_FBcACk194r.mp4

Hi @giduac

Is there a chance to copy it over to the TestApp?

@giduac
Copy link
Contributor

giduac commented Jun 22, 2024

@Wagnerp

Give it a try first...
I think there's more room for test pages like this.
We could see to setup something more elaborate which can be extended.
The overlay on the top ribbon doesn't work since that one is also set in the TableLayoutPanel.

This will be a good aid to get the Black 365 fine-tuning right....

@PWagner1
Copy link
Contributor

Hi @giduac

Just a thought... the current 'normal' input control colours should be used as the 'disabled' colours & the 'normal' colours should be darker. See

image

@PWagner1
Copy link
Contributor

Disabled colours

image

@giduac
Copy link
Contributor

giduac commented Jun 25, 2024

Hi @giduac

Just a thought... the current 'normal' input control colours should be used as the 'disabled' colours & the 'normal' colours should be darker. See

image

@Wagnerp
Enabled state , already known
Disabled state, inverted from the enabled state

one state for controls like textboxes / input controls (light background or so)
one state for things like buttons / images / trackbars... (not so light background)

Try inverting first as a starting point.
Use those colours throughout the theme for a consistent look and feel.

@PWagner1
Copy link
Contributor

@giduac

I've inverted the colours

Background (disabled) should be: #666666

Text ": White

Useful tool https://pinetools.com/invert-color

@giduac
Copy link
Contributor

giduac commented Jun 25, 2024

@Wagnerp

Is that useful in this case?

@PWagner1
Copy link
Contributor

@Wagnerp

Is that useful in this case?

@giduac

Yes, as it gives you an inverted colour of the original, in this case #000000 (#999999).

image

@giduac
Copy link
Contributor

giduac commented Jun 25, 2024

@Wagnerp
And how does that work in the theme itself?

@PWagner1
Copy link
Contributor

@Wagnerp And how does that work in the theme itself?

@giduac

Going to implement & test today

@giduac
Copy link
Contributor

giduac commented Jun 25, 2024

@Wagnerp
Post a couple screenshots....

@PWagner1
Copy link
Contributor

@Wagnerp Post a couple screenshots....

@giduac

Will do

@PWagner1
Copy link
Contributor

@Smurf-IV & @giduac

Changes...

image

What do you think?

@PWagner1
Copy link
Contributor

image

@Smurf-IV
Copy link
Member Author

Smurf-IV commented Jun 26, 2024

342714705-c94a8363-19f8-4338-af7a-18a619d9a6e4

I like this better, as it's Not bright (i.e. Dark Mode in all the right places - or will be when 1573 is sorted)

@PWagner1
Copy link
Contributor

image

I like this better, as it's Not bright (i.e. Dark Mode in all the right places - or will be when 1573 is sorted)

Hi @Smurf-IV

Was that the second image, as the link is broken?

@Smurf-IV
Copy link
Member Author

image

I like this better, as it's Not bright (i.e. Dark Mode in all the right places - or will be when 1573 is sorted)

Hi @Smurf-IV

Was that the second image, as the link is broken?

Replaced with direct image insert

@PWagner1
Copy link
Contributor

image

I like this better, as it's Not bright (i.e. Dark Mode in all the right places - or will be when 1573 is sorted)

Hi @Smurf-IV
Was that the second image, as the link is broken?

Replaced with direct image insert

Ahh yes, will create a PR tomorrow

cc. @giduac

@PWagner1 PWagner1 removed their assignment Jun 28, 2024
@PWagner1 PWagner1 added fixed This issue has been fixed. and removed under investigation This bug/issue is currently under investigation. ongoing This issue is ongoing. labels Jun 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:ribbon All issues to do with the ribbon. area:themes All things to do with themes. bug Something isn't working fixed This issue has been fixed. version:90 All things to do with V90.
Projects
None yet
Development

No branches or pull requests

3 participants