Free tool
Theme generator
Pick an OTF palette, watch a preview re-theme live, and copy the tokens. One palette gives you web CSS variables and native tokens.
New
Project usage
Every element here is styled from the palette above.
CSS variables (web)
:root {
--background: 0 0% 100%;
--foreground: 0 0% 0%;
--card: 0 0% 100%;
--card-foreground: 0 0% 0%;
--primary: 240 6% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 5% 96%;
--secondary-foreground: 240 4% 16%;
--accent: 240 5% 26%;
--accent-foreground: 0 0% 100%;
--ring: 240 6% 10%;
--border: 240 5% 96%;
--input: 240 5% 96%;
}
.dark {
--background: 240 10% 4%;
--foreground: 0 0% 100%;
--card: 240 10% 4%;
--card-foreground: 0 0% 100%;
--primary: 240 6% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 1% 14%;
--secondary-foreground: 0 0% 100%;
--accent: 240 7% 5%;
--accent-foreground: 0 0% 100%;
--ring: 240 6% 10%;
--border: 240 2% 21%;
--input: 240 2% 21%;
}
Native tokens (React Native)
export const otfTheme = {
primary: '#18181B',
primaryForeground: '#FAFAFA',
secondary: '#F4F4F5',
secondaryForeground: '#27272A',
accent: '#3F3F46',
background: '#FFFFFF',
darkMode: '#09090B',
} as const
Web variables are HSL channels, the format the kit's tokens read. Native tokens are hex. Both come from the palette on the left.