​
Overview

You can customize your app’s theme colors using the Tweakcn Editor - a visual tool that generates NativeWind (TailwindCSS) compatible color schemes.
Tweakcn Editor showing the theme customization interface

Tweakcn Editor - Visual Theme Designer

​
Customizing Your Theme

1

Design in Tweakcn

  1. Open the TweakCN Editor
  2. Use the AI chat or manually adjust colors
  3. Toggle between light/dark modes to test your theme
  4. Click { } Code in the top right
  5. Select Tailwind v3 and HSL format
  6. Make sure index.css is selected
  7. Click Copy to get your theme code
Theme code export dialog

Theme Code Export

2

Update Your Files

  1. Copy the theme code from TweakCN and paste it inside the @layer base { } block in your global.css file
  2. In the pasted code, replace .dark with .dark:root
  3. In lib/constants.ts, update the theme colors: 
    export const NAV_THEME = {
  light: {
    background: 'hsl(0 0% 100%)',
    text: 'hsl(222.2 84% 4.9%)',
    primary: 'hsl(221.2 83.2% 53.3%)',
    // ... other light mode colors
  },
  dark: {
    background: 'hsl(222.2 84% 4.9%)',
    text: 'hsl(210 40% 98%)',
    // ... dark mode colors
  }
};
3

Test Your Theme

  1. Test in both light and dark modes
  2. Check all UI components for proper contrast
  3. Test on physical devices