Skip to content

Changing colors

Rebrand the app from one file.

Edit the palette in `constants/theme.ts`. Every screen follows.

export const colors = {
  background: "#0B0E17",
  surface:    "#141927",
  text:       "#F4F6FB",
  textMuted:  "#A7AFC4",
  accent:     "#7C6BFF",
  success:    "#35D6A4",
  danger:     "#FF6B81",
} as const;

Keep contrast legible

If you lighten the background or darken the text, check the contrast ratio. Body text should reach at least 4.5:1 against its background, and large headings at least 3:1. A template that looks good in a screenshot but fails in sunlight is not finished.

Changing colors — Documentation — Custom Theme