Changing Colors

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.

📁 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:

: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:

.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:

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

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