SPFx Teams tab: Use react hooks to dynamically handle theme changes

When developing a custom Teams tab with the SharePoint Framework, we want to make sure that the SPFx custom tab (web part) is styled according to the current selected theme.

Also, if the user switches the theme (e.g. from default to dark), we want to make sure that the styling of our SPFx web part also changes without the user having to reload the tab.

Let's see how we can do this. In this post, depending on the Teams theme, we will dynamically add a CSS class to our top level react component. And when the theme changes, we will change this class as well. That will be the scope of this post without going into further details of Styling/CSS.

Also, since I have been exploring React hooks recently, we will be using them in the demo code.

The very first thing we need to do is to make sure that our SPFx tab loads with the currently selected theme when the tab loads for the first time.. This can be achieved with the teamsJS sdk bundled with SPFx:

this.context.sdks.microsoftTeams.context.theme

view raw teams_spfx_current_theme.ts hosted with ❤ by GitHub

The theme property will either have the values "default", "dark" or "contrast" (at the time of writing this post). Depending on this property, we can add a CSS class to the top level container of our web part.

Now the important part. When the user updates the theme, we want to fire an event which can be used to set the new theme in our tab. Luckily the teamsJS sdk provides us with a function which can be used to register this event handler:

https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/access-teams-context#theme-change-handling

	const [themeState, setThemeState] = useState<string>(props.teamsTheme || "default");
	//Run effect once when the component loads. We will use this effect to register our Theme Changed handler.
	useEffect(() => {
	console.log("registerOnThemeChangeHandler useEffect fired");
	props.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler((theme: string) => {
	console.log(`theme changed to: ${theme}`);
	//Update the themeState with the new theme.
	setThemeState(theme);
	});
	}, []);

view raw teams.spfx.theme.ts hosted with ❤ by GitHub

With this, we are able to capture the theme update dynamically and update our component state. Next, we also want to change the CSS class of the top container when the theme changes. We will do this by using the useEffect hook again and setting the class depending on the selected theme.

This hook takes in the themeState as a dependency which means that it will run anytime themeState changes. We will use it to update the styleState.

	const [styleState, setStyleState] = useState<string>(styles.containerdefault);
	//Run anytime the themeState changes.
	useEffect(() => {
	console.log("themeState useEffect fired");
	switch (themeState) {
	case "dark":
	setStyleState(styles.containerdark);
	break;
	default:
	setStyleState(styles.containerdefault);
	}
	}, [themeState]);

view raw teams.spfx.css.ts hosted with ❤ by GitHub

I could have been a bit more clever here and simply updated the class in the registerOnThemeChangeHandler function itself. But I wanted to keep the themeState and styleState separate to have them loosely coupled and also to play around with hooks a bit more ;)

Here is the complete code for the React Functional component:

	import * as React from 'react';
	import styles from './HelloTeams.module.scss';
	import { IHelloTeamsProps } from './IHelloTeamsProps';
	import { useEffect, useState } from 'react';
	const HelloTeams: React.FunctionComponent<IHelloTeamsProps> = (props: IHelloTeamsProps) => {
	const [themeState, setThemeState] = useState<string>(props.teamsTheme || "default");
	const [styleState, setStyleState] = useState<string>(styles.containerdefault);
	//Run effect once when the component loads. We will use this effect to register our Theme Changed handler.
	useEffect(() => {
	console.log("registerOnThemeChangeHandler useEffect fired");
	props.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler((theme: string) => {
	console.log(`theme changed to: ${theme}`);
	//Update the themeState with the new theme.
	setThemeState(theme);
	});
	}, []);
	//Run anytime the themeState changes.
	useEffect(() => {
	console.log("themeState useEffect fired");
	switch (themeState) {
	case "dark":
	setStyleState(styles.containerdark);
	break;
	default:
	setStyleState(styles.containerdefault);
	}
	}, [themeState]);
	return (
	<div className={styles.helloTeams}>
	<div className={`${styles.container} ${styleState}`}>
	<div className={styles.row}>
	<div className={styles.column}>
	<span className={styles.title}>Welcome to Teams in {themeState} mode!</span>
	</div>
	</div>
	</div>
	</div>
	);
	};
	export default HelloTeams;

view raw teams.spfx.code.ts hosted with ❤ by GitHub

Hope you found the post useful! As always, the code for this post is available on GitHub: https://github.com/vman/spfx-teams-theme-hooks