Theme Colors

Basic Usage

Epicwind UI includes a naming convention for colors. You can replace the default colors in your project.

@theme {
  --color-white: #fff;
  --color-black: #000;

  --color-lightest: var(--color-gray-100);
  --color-light: var(--color-gray-300);
  --color-neutral: var(--color-gray-500);
  --color-dark: var(--color-gray-700);
  --color-darkest: var(--color-gray-900);

  --color-primary: var(--color-blue-500);
  --color-secondary: var(--color-blue-700);
  --color-tertiary: var(--color-blue-900);
  --color-quaternary: var(--color-blue-950);

  --color-success: var(--color-green-500);
  --color-success-secondary: var(--color-green-700);

  --color-error: var(--color-red-500);
  --color-error-secondary: var(--color-red-700);

  --color-warning: var(--color-orange-500);
  --color-warning-secondary: var(--color-orange-700);

  --color-notice: var(--color-yellow-500);
  --color-notice-secondary: var(--color-yellow-600);

  --color-info: var(--color-blue-500);
  --color-info-secondary: var(--color-blue-700);

  --color-deprecated: var(--color-purple-500);
  --color-deprecated-secondary: var(--color-purple-700);

  --color-decorative: var(--color-pink-500);
  --color-decorative-secondary: var(--color-pink-700);

  --color-muted: var(--color-yellow-700);
  --color-muted-secondary: var(--color-yellow-900);
}