How to customize the theme of the components from the kits.

When installing components from any kit, the uikit cli always adds a theme.tsx file. The values inside this file can be freely adapted to create a custom theme.

For instance, when installing a Button from the default kit, the primary color of the theme can be modified as seen in the follwing.

export const colors = basedOnPreferredColorScheme({
  light: {
    primary: "red"

Now, with the following code

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Root, Text, setPreferredColorScheme } from "@react-three/uikit";
import { createRoot } from "react-dom/client";
import { Button } from "./components/button";
import { Defaults } from "./components/theme";


  <Canvas camera={{ position: [0, 0, 0.5] }}>
    <OrbitControls />
          <Text>I am red.</Text>

this result is achieved.

themed button in red