Theming

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";

setPreferredColorScheme("light");

createRoot(document.getElementById("root")).render(
  <Canvas camera={{ position: [0, 0, 0.5] }}>
    <OrbitControls />
    <Root>
      <Defaults>
        <Button>
          <Text>I am red.</Text>
        </Button>
      </Defaults>
    </Root>
  </Canvas>
);

this result is achieved.

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Root, Container, setPreferredColorScheme } from "@react-three/uikit";
import { Defaults, Button } from "@react-three/uikit-default";

setPreferredColorScheme("light");

export default function App() {
return (
  <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }} camera={{ position: [0, 0, 0.5] }}>
    <OrbitControls />
    <Root>
    <Defaults>
      <Button>
        <Text>I am red.</Text>
      </Button>
    </Defaults>
  </Root>
  </Canvas>
)
}

Open Sandbox

Edit this page