Fluent ui react theme for teams

Question

I am am building a teams app, I want to set the teams theme using fluent theme, what are the exact values for theme in theme provider, Can i use fluentui/Northstar and fluentui/react together?

Answer 1

Please take a look at Designing your Microsoft Teams app with UI templates. The templates are a collection of Fluent UI-based components that work across common Teams use cases, giving you more time to figure out the best experience for your users.

Answer 2

You can use package '@fluentui/react-northstar' for handling teams theme.

Use it something like below: import { Provider, teamsTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-northstar'

public setThemeComponent = () => {
    const rtl = i18n.dir() === "rtl";

    if (this.state.theme === "dark") {
        return (
            <Provider theme={teamsDarkTheme} rtl={rtl}>
                <div className="darkContainer">
                    {this.getAppDom()}
                </div>
            </Provider>
        );
    }
    else if (this.state.theme === "contrast") {
        return (
            <Provider theme={teamsHighContrastTheme} rtl={rtl}>
                <div className="highContrastContainer">
                    {this.getAppDom()}
                </div>
            </Provider>
        );
    } else {
        return (
            <Provider theme={teamsTheme} rtl={rtl}>
                <div className="defaultContainer">
                    {this.getAppDom()}
                </div>
            </Provider>
        );
    }
}

Also you can refer below sample apps for it: https://github.com/OfficeDev/microsoft-teams-apps-company-communicator/blob/master/Source/CompanyCommunicator/ClientApp/src/App.tsx