> ## Documentation Index > Fetch the complete documentation index at: https://docs.relay.link/llms.txt > Use this file to discover all available pages before exploring further. # Theming > Customize the ui theme to fit your app ## Creating a Theme RelayKit UI can be fully themed using an intuitive set of theme tokens. You can choose to override all tokens or just a few to make the components match your application theme. You can view the full list of theme overrides [here](https://github.com/reservoirprotocol/relay-kit/blob/main/packages/ui/src/themes/RelayKitTheme.ts#L10). ```tsx theme={null} import { RelayKitTheme } from '@relayprotocol/relay-kit-ui' const theme: RelayKitTheme = { font: "Inter", primaryColor: "#09F9E9" focusColor: "#08DECF" text: { default: "#000" subtle: "#fff" } buttons: { primary: { color: "#000" background: "#09F9E9", hover: { color: "#000" background: "#0ad1c4", } } } } ``` ### Fonts If you are overriding any fonts with custom fonts you need to configure the custom font in your application. For example if you're using nextjs you can refer to this [doc](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) or if you're pulling the fonts in via css you can refer to this [doc](https://www.w3schools.com/css/css3_fonts.asp). ### Light/Dark Mode RelayKit UI has built-in support for light and dark mode themes. The components will automatically adapt their appearance based on the theme mode you specify. To control the theme mode, simply add the `light` or `dark` class to your HTML container element: ```html theme={null} ... ... ``` ## Usage Now that your theme is configured you'll just need to pass it into the `RelayKitProvider`. ```tsx theme={null} import { RelayKitProvider, RelayKitTheme } from '@relayprotocol/relay-kit-ui' const theme: RelayKitTheme = { ... } //Previously created theme ... {YOUR_APP} ```