App

Theme

The App component loads some default themes that are included in Fusion. Although you can use className to apply themes to your application, if you use the App component, it’s better to use its dedicated theme prop, because that will replace the theme classes instead of adding them, so it avoids applying unused CSS variables.

import { componentTheme, darkTheme, primitiveTheme } from "@codedazur/fusion/style";
 
<App theme={{
  primitive: primitiveTheme,
  semantic: darkTheme,
  component: componentTheme,
}}>

You can also provide a partial theme object to override just some of the tiers, or you can provide a string value, which will be interpreted as the semantic theme (because that is the most common use-case).

import { darkTheme } from "@codedazur/fusion/style";
 
<App theme={darkTheme}>