V9: Theme Designer?

[blendsdk]

Hi,

Is there a Theme Designer for v9?

I understand the concept of a brand ramp but I would rather provide a primary color like Teams 80 and have the rest of them generated.

It would also help to provide us the color difference intervals (perhaps in %) so we can use a darken() or lighten() method to generate brand ramps ourselves.

I would rather not use a V8 theme and then convert it to V9 using createV9Theme

Any ideas?

Please see my following links:

• Green theme
• Grey theme
• V8 ThemeDesigner

UPDATE:

I was able to achieve the following:

import type { Theme } from "@fluentui/react-components";
import { Button, createLightTheme, FluentProvider } from "@fluentui/react-components";
import ReactDOM from "react-dom";

import { createBrandVariants } from "@fluentui/react-migration-v8-v9";

export const brand = createBrandVariants(
    {
        themePrimary: "#4a4a4a",
        themeLighterAlt: "#f8f8f8",
        themeLighter: "#e2e2e2",
        themeLight: "#c9c9c9",
        themeTertiary: "#929292",
        themeSecondary: "#606060",
        themeDarkAlt: "#434343",
        themeDark: "#383838",
        themeDarker: "#292929",
        neutralLighterAlt: "#faf9f8",
        neutralLighter: "#f3f2f1",
        neutralLight: "#edebe9",
        neutralQuaternaryAlt: "#e1dfdd",
        neutralQuaternary: "#d0d0d0",
        neutralTertiaryAlt: "#c8c6c4",
        neutralTertiary: "#a19f9d",
        neutralSecondary: "#605e5c",
        neutralPrimaryAlt: "#3b3a39",
        neutralPrimary: "#323130",
        neutralDark: "#201f1e",
        black: "#000000",
        white: "#ffffff"
    } as any,
    "pairs"
);

const greyTheme: Theme = createLightTheme(brand);

ReactDOM.render(
    <FluentProvider theme={greyTheme}>
        <Button appearance="primary">I am a button.</Button>
    </FluentProvider>,
    document.getElementById("root")
);

[AkiraVoid]

https://aka.ms/themedesigner-v9

See also: #25424

Note that this tool is currently in developing, it may have some accessibility issues.

[blendsdk]

Great thanks 👍

[ahmed-adly-khalil]

Nice tool 👍

[JustSlone]

Thank you @emmayjiang for your work on the theme designer 😀

[mark-wiemer]

@JustSlone I see this is mostly integrated into Theme / Theme Designer (react.fluentui.dev), but without the contrast checks and token details.

However, even using the tool linked by AkiraVoid, I'm not able to create a dark theme that passes all accessibility checks, especially not a dark theme. Even the default theme fails three checks :(

Is there work being done to ensure the theme creator works for dark themes as well?

For my reference:

• Fluent v9 dark theme is not accessible mark-wiemer/markwiemer.com#22
• [Bug]: createDarkTheme and Theme Designer v9 cannot create accessible dark theme #32217