Theme Provider

ThemeProvider is a React Context Provider that provides the current theme to the application and a function to change it.

To use the ThemeProvider, wrap your application's entry point. This should be done as high in the component tree as possible.

You should also add the MantleThemeHeadContent component to the head of your application to prevent a Flash of Unstyled Content (FOUC) when the app first loads as well as preload all of our custom fonts.

root.tsx

import { MantleThemeHeadContent, ThemeProvider } from "@ngrok/mantle/theme-provider";

export default function App() {
	return (
		
			
				// 👇 add this as high in the  as possible!
				
				
				
				
				
				
			
			
				// 👇 wrap your app entry in the ThemeProvider
				
					
				
			
		
	);
}

Sometimes you cannot use the MantleThemeHeadContent component because your webserver is not able to render React components. In this case, you can use the copy the following script and add it to your application's <head>:

index.html

You will also need to ensure that you add the PreloadFonts component to your app as well.

index.html

Then, in your application, you can use the useTheme hook to get and change the current theme:

app.tsx

import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectLabel,
	SelectTrigger,
} from "@ngrok/mantle/select";
import { isTheme, theme, useTheme } from "@ngrok/mantle/theme-provider";

function App() {
	const [currentTheme, setTheme] = useTheme();

	return (
		<>
			
			{/* The rest of your app... */}
		
	);
}