Introduction

useSpiroKitTheme hook

SpiroKit comes with a handy hook called useSpiroKitTheme that allows you to customize your app to match your brand.

You will need to use this hook during the setup of the SpiroKitProvider as described here

You can optionally pass a Theme object to the useSpiroKitTheme hook to setup your preferences like so:

// Step 1. Define your theme preferences
const theme = useSpiroKitTheme({
  // Theme object
});

export default function App() {
  return (
    // Step 2. Assign your theme
    <SpiroKitProvider theme={theme}>...</SpiroKitProvider>
  );
}

Theme object

{
  "config": {
    "colors": {
      "primary": "indigo",
      "primaryGray": "neutralGray",
      "primaryDark": "neutralDark"
    },
    "fonts": {
      "body": "Poppins",
      "heading": "Poppins"
    },
    "initialColorMode": "light",
    "useSystemColorMode": true
  },
  "resources": {
    "colors": {
      // Your custom colors go here
    },
    "fonts": {
      // Your custom fonts go here
    }
  }
}

Let's take a look at all the available customizations:

1. Setting up your primary accent color, type of gray, and type of dark
2. Using a custom accent color
3. Overriding the Accent color for a component
4. Adding new typefaces
5. Choose the Initial color mode for your app
6. Using the system color mode