Overriding the Accent color for a component

The entire component library will inherit and use the primary color you defined. However, you can always override the accent color for a component by passing the optional accentColor prop like this:

Tap

Tap

Tap

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

const HomeScreen = () => {
  <VStack space={"$4"}>
    {/* Indigo accent color by default */}
    <Button>Tap</Button>

    {/* Using a custom accent color */}
    <Button accentColor="orange">Tap</Button>
    <Button accentColor="rose">Tap</Button>
  </VStack>;
};

Given that the complex components heavily rely on composition, you can also override the accent color of each sub-element for a given component. Let's take a look at the following tab bar component

Gallery

Music

Reading

Saved

// Creative app tabs with custom colors
const creativeTabs = [
  { label: "Gallery", icon: Camera, accentColor: "pink" },
  { label: "Music", icon: Music, accentColor: "violet" },
  { label: "Reading", icon: BookOpen, accentColor: "amber" },
  { label: "Saved", icon: Bookmark, accentColor: "emerald" },
];

const [activeTab, setActiveTab] = useState<number>(0);

return (
  <TabBar colorMode={colorMode === "light" ? "dark" : "light"}>
    {creativeTabs.map((tab, index) => (
      <Tab
        key={`creative-${index}`}
        accentColor={tab.accentColor as any}
        onPress={() => setActiveTab(index)}
        isFocused={activeTab === index}
      >
        <Tab.Icon>
          <tab.icon />
        </Tab.Icon>
        <Tab.Label>{tab.label}</Tab.Label>
      </Tab>
    ))}
  </TabBar>
);