Theming

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>
);

The 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:

Anvil2 Web

Resources

Dark mode

Design

Code

Theming Variables

Semantic Color Variables

Primitive Color Variables

Anvil2 Web

Resources

​Dark mode

​Design

​Code

​Theming Variables

​Semantic Color Variables

​Primitive Color Variables

Dark mode

Design

Code

Theming Variables

Semantic Color Variables

Primitive Color Variables