Anvil2 supports theming to customize apps to reflect product branding and/or different modes.
Dark mode
Design
Anvil2 Figma assets utilize variables to apply light and dark mode styling. Refer to Figma’s guidance on how to switch between modes.
Code
import { AnvilProvider } from "@servicetitan/anvil2";
return (
<AnvilProvider themeData={{ mode: "dark" }}>
<Button>This is a Button</Button>
</AnvilProvider>
);
AnvilProvider usually lives at the root of the application, and includes a ThemeProvider under the hood.
To change the theme of certain components within a page, and not the entire app, use the ThemeProvider instead:
Theming Variables
Semantic Color Variables
Primitive Color Variables
Last modified on January 23, 2026
