Customization
Theming
Customize Frame to match your brand with our flexible theming system.
Theme Configuration
Create a custom theme by defining your colors, typography, and spacing values.
import { FrameProvider, createTheme } from '@frame/ui';const myTheme = createTheme({colors: {primary: '#4FD1FF',secondary: '#8B5CF6',background: '#0A0D14',surface: '#1A1D24',text: '#E5E5E5',muted: '#586674',},fonts: {sans: 'Inter, sans-serif',mono: 'Fira Code, monospace',},radii: {sm: '4px',md: '8px',lg: '12px',xl: '16px',},});function App({ children }) {return (<FrameProvider theme={myTheme}>{children}</FrameProvider>);}
Color Palette
Primary
#4FD1FF
Secondary
#8B5CF6
Success
#22C55E
Warning
#F59E0B
Danger
#EF4444
Background
#0A0D14
Surface
#1A1D24
Muted
#586674
Dark Mode
Frame supports dark mode out of the box. Toggle between themes using the FrameProvider.
// Toggle theme mode<FrameProvider theme="dark"> {/* or "light" or "system" */}<App /></FrameProvider>// Or use the hookconst { theme, setTheme } = useTheme();setTheme('dark');