---
description: >-
  The project uses Tailwind CSS with support for both light and dark themes. All
  global color variables are defined using CSS custom properties
  (--variable-name) and can be easily updated.
---

# Changing Colors

**📁 Location**

You can find and edit these color variables in the following files:

* `src/index.css`
* `App.css`

**🌞 Light Mode**

Light mode variables are defined under the `:root` selector.\
Example:

```css
:root {
  --primary: #e6d100;
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.145 0 0);
  ...
}
```

**🌙 Dark Mode**

Dark mode variables are defined under the `.dark` class.\
Example:

```css
.dark {
  --primary: #f7f258;
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  ...
}
```

**⚙️ How to Change Colors**

To customize the theme:

1. Open `src/index.css` or `App.css`.
2. Locate the variable you'd like to change, such as `--primary`.
3. Update its value to match your desired color.

**Example:**

```css
--primary: #ff6600; /* new primary color */
```

4. Tailwind will automatically apply the new styles based on your variable values.







