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.
Edit Safely
Section titled “Edit Safely”- Start with
src/styles/global.css. - Search for the current brand colors across
src/components,src/layouts, andsrc/pages. - If CSS variables exist, prefer updating variables instead of changing every component.
- If Tailwind utility classes are used directly, update related components consistently.
- 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.
Contrast
Section titled “Contrast”Use sufficient contrast for body text, navigation, buttons, and links. Do not rely on color alone to show active, disabled, selected, or error states.