Skip to content

Colors

Global styles are stored in src/styles/global.css. The theme uses Tailwind CSS 4, so color decisions may appear as utility classes, CSS variables, or custom CSS depending on the component.

  1. Start with src/styles/global.css.
  2. Search for the current brand colors across src/components, src/layouts, and src/pages.
  3. If CSS variables exist, prefer updating variables instead of changing every component.
  4. If Tailwind utility classes are used directly, update related components consistently.
  5. Test light backgrounds, dark text, buttons, links, focus states, cards, and form fields.

Example only:

:root {
--color-brand: #8b5a2b;
--color-accent: #c58a42;
}

Do not assume these variable names exist in the purchased theme. Confirm exact names in src/styles/global.css.

Use sufficient contrast for body text, navigation, buttons, and links. Do not rely on color alone to show active, disabled, selected, or error states.