Theming / Colors

Picking a theme

• In config.ts, you can update your theme using the variable defaultShipNativeTheme

  const config: Config = {
    // ...
    defaultShipNativeTheme: "blue",
    // ...
  }

• You can see all the theme options in themeConfig.ts

  export const themeOptions = [
    "blue",
    "indigo",
    "violet",
    "zinc",
    "pink",
    "rose",
    "red",
    "orange",
    "amber",
    "yellow",
    "green",
    "emerald",
    "sky",
  ] as const;

Setting up a custom theme

1. Add the theme name in themeOptions

   themeConfig.ts

   export const themeOptions = [
     // ...
     "brown"
   ] as const;

2. Define the colors for the theme in light mode & dark mode

   themeConfig.ts

   const brown_light_themeColors: ShipNativeTheme = {
     background: "0 0% 100%",
     foreground: "20 14.3% 4.1%",
     primary: "38 92.1% 50.2%",
     primaryForeground: "26 83.3% 14.1%",
     muted: "60 4.8% 95.9%",
     mutedForeground: "25 5.3% 44.7%",
     destructive: "0 84.2% 60.2%",
     destructiveForeground: "210 40% 98%",
     accent: "38 92.1% 50.2%",
     accentWeak: "38 92.1% 50.2%",
     accentStrong: "38 92.1% 50.2%"
   }
   
   const brown_dark_themeColors: ShipNativeTheme = {
     background: "20 14.3% 4.1%",
     foreground: "60 9.1% 97.8%",
     primary: "38 92.1% 50.2%",
     primaryForeground: "26 83.3% 14.1%",
     muted: "12 6.5% 15.1%",
     mutedForeground: "24 5.4% 63.9%",
     destructive: "0 84.2% 60.2%",
     destructiveForeground: "210 40% 98%",
     accent: "38 92.1% 50.2%",
     accentWeak: "38 92.1% 50.2%",
     accentStrong: "38 92.1% 50.2%"
   }

3. Add the themes you set up to the theme colors

   themeConfig.ts

   export const themeColors : Record<ShipNativeThemeOption, ShipNativeLightDark> = {
     // ...
     brown: {
       light: brown_light_themeColors,
       dark: brown_dark_themeColors
     },
   }