theme
prop of the Provider
component. In the example below we override the default blue primary color to be #000000
:
Tailwind CSS and Shadcn
If you’re using Tailwind CSS with Shadcn, you can use thetheme
mappings below to automatically match your existing theme.
<ThemeProvider />
to enable theming such as dark mode, make sure the <Frigade.Provider />
is a child of the <ThemeProvider />
component.
CSS Variables
Our theme runs on a set of CSS custom properties that map 1:1 to the properties in the theme. For any part of the theme, you can override the related CSS var and any themed value in that CSS scope will be changed accordingly. This is especially useful in conjunction with thecss
prop, as it allows you to create temporary sub-themes that apply only to one Component, e.g.:
Finding a specific theme variable
You can use your browser’s developer tools to inspect the CSS properties of any Frigade component. For instance, to find the theme variable for the secondary text in the Form component, you can inspect the element and look for thecolor
property:

--fr-colors-neutral-400
, which also corresponds to colors.neutral.400
in the theme object.