Header and theme color

[stephenrichardson]

The default theme colour will be the same colour as our company brand. This colour is reflected in --accent-base-color.
The header uses --accent-fill-rest so it's a slightly lighter version of the colour that we want. Ideally I would want to use --accent-base-color for the header in light mode and --accent-fill-rest in dark mode. Not sure if there is a way to do that?

[vnbaaij]

The design tokens from the web components always use a 'recipe' in this version (see https://www.fluentui-blazor.net/DesignTokens#adaptive-color-system).

We normally use these calculated colors in our components, but you should be able to overrule that with your own CSS. This will probably involve !important rules. You also need to work with @media (prefers-color-scheme: XXX media queries to have distinct values for light and dark.

[stephenrichardson]

This worked in light mode but in dark mode it was still accent-base-color and not accent-fill-rest.

@media (prefers-color-scheme: light) {
    header {
        background: var(--accent-base-color) !important;
    }
}

@media (prefers-color-scheme: dark) {
    header {
        background: var(--accent-fill-rest) !important;
    }
}

This didn't do anything in light mode or dark mode. It was accent-fill-rest in light mode and dark mode.

@media (prefers-color-scheme: dark) {
    header {
        background: var(--accent-base-color) !important;
    }
}