Setting up your primary accent color, type of gray, and type of dark

• Choose a primary accent color (Select between indigo (default), emerald, red, rose, amber, blue, orange, yellow, lime, green, teal, cyan, sky, violet, purple, fuchsia, pink)
• Choose a primary gray color (Select between coolGray, neutralGray(default), and warmGray)
• Choose a primary dark mode color ((Select between coolDark, neutralDark (default), and warmDark))

Here's a basic example using all the default values

Tap

import { Button, SpiroKitProvider, useSpiroKitTheme } from "@spirokit/ui";

// Using "indigo" as accent color,
// "neutralGray" as type of gray, and
// "neutralDark" as type of dark color.
const theme = useSpiroKitTheme();

const App = () => {
  return (
    <SpiroKitProvider theme={theme}>
      {/* Button component inheriting the default accent color */}
      <Button>Tap</Button>
    </SpiroKitProvider>
  );
};

Let's say you want to use "Orange" as your accent color, and you want to use the "Warm gray" variant. Here's another example with those preferences:

Tap

import { Button, SpiroKitProvider, useSpiroKitTheme } from "@spirokit/ui";

const theme = useSpiroKitTheme({
  config: {
    colors: {
      primary: "orange",
      primaryGray: "warmGray",
    },
  },
});

const App = () => {
  return (
    <SpiroKitProvider theme={theme}>
      {/* Button component inheriting the new accent color and type of gray */}
      <Button>Tap</Button>
    </SpiroKitProvider>
  );
};