Open jolleekin opened 5 years ago
This used to be in the docs but I can't find it anymore. @chigy can you update this to include it?
@jolleekin , is this page not what you are looking for? https://docs.microsoft.com/en-us/windows/uwp/design/style/color#accent-color-palette
@chigy What I mean is the actual algorithm to calculate the light and dark shades of an accent color.
@jolleekin , the actual algorithm is not public and I do not believe there's any plan to do so. If it is available, how would you use it? We do provide a way for you to get different shades of accent color through Theme Resources as well as grammatically. What is missing that this does not give you? I'm just curious to know about the gap.
@chigy I have a package of general purpose web components (text box, combo box, dialog, menu, …) based on Microsoft design language. Part of that package is a theme manager that allows users to dynamically change theme properties (accent color, light/dark mode, and so on). When the accent color is changed, the theme manager will automatically recalculate the light and dark shades and update the theme stylesheet. I tried to reverse-engineer the algorithm but didn't succeed.
@jolleekin , I reached out to the team who might be able to help here but they've got a bit of moving of the resources around and I cannot pinpoint a person who can help answer this question. Sorry about that but I'm trying...
I would also be interested in that algorithm - any updates to this?
The only thing that I can find on the matter is this StackOverflow answer from 2017, which links back to this page and cites the formula for title bar font color,
Color c = uiSettings.GetColorValue(UIColorType.Accent);
element.RequestedTheme = ((5 * c.G + 2 * c.R + c.B) <= 8 * 128)
? ElementTheme.Light
: ElementTheme.Dark;
Having these little formulas public is essential for having applications fit in with the OS - if you experiment with middle-of-luminance-spectrum accent colors (e.g. #06A8C3
), you can find that most people were too sane to sit through and figure out the exact formulas by experiment, and thus plenty of software looks slightly or not so slightly off - ranging from missing the lighter/darker accent shades (which you usually cannot tell unless they are next to those of a native window) to not calculating the title color correctly, at which point it might be an annoyance to end user.
@jolleekin , I reached out to the team who might be able to help here but they've got a bit of moving of the resources around and I cannot pinpoint a person who can help answer this question. Sorry about that but I'm trying...
Thanks for reaching out and pointing me to this thread. I can confirm that the formula mentioned by YellowAfterlife is the formula in use here. That is the old logic used dating back at least to ComCtl and we have maintained compatibility with that.
I was rather curious about how UWP is calculating the shades based on an accent color, not the theme
That is not currently documented that I am aware of. Quick general overview:
There's no meaningful way to perfectly mesh with the generated accent color "ramps" without simply using the supported API set that provides them. The generating formula has changed and will change as needed, so obtaining the correct UIColorType for your usage is probably the best most supportable plan.
You can find some color algorithms in the Fluent XAML Theme Editor in the Windows Store, made by Microsoft itself to help to customize app theme colors at once...
https://www.microsoft.com/store/productId/9N2XD3Q8X57C
...and in particular into it's source code:
https://github.com/Microsoft/fluent-xaml-theme-editor
Best regards
I have a bunch of questions:
An accent color algorithm in the Windows shell generates light and dark shades of the accent color.
SystemAccentColor
?1: As you note, that algorithm is not currently public.
2: I don't know if anybody here can or should speak to future plans in this volatile world. If you do want to achieve color parity, you would want to use the existing APIs.
3: That means that the classic Windows shell calls some common internal code to determine the color ramp (light to dark) used.
3i: I'm unaware of any executable that would generate a palette for you. You would generally want to use any existing APIs. I'm unaware of any APIs to get at these values within classic shell / classic shell applications.
4: I'm personally unaware. For some usages in Windows there is complicated internal mapping to map accent colors to color sets, so it is entirely possible that there is some internal mapping here. I don't know if Fluent UI exposes accent color-based ramps.
4b: Different design teams have different design visions: it's entirely possible that a new color system is viewed as being a full contextual replacement for a color system used in a different scenario. There's always a tough balance between legacy support and needlessly encumbering an implementation.
5: Those calculations are not public to my knowledge. I believe my comments above on Jul 24, 2019 are the most extensive references available, and they do point out that calculating these yourself would be troublesome as the handling code itself has internal undocumented variances.
Ah, got it. Thank you for the detailed explanation!
Also, can you please tell me more about the APIs you mentioned?
The entirety of the documentation for this specific area of interest that I'm aware of across all surfaces can be found here:
Beyond that I am unaware of any further documentation. The accent color ramp will not be directly accessible nor deducible from some code surfaces.
What is the algorithm that generates light and dark shades of the accent color? Can it be made public?
Document Details
⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.