Customize Colors

This section explains how to customize the color variables to fit your project's visual identity. You can adjust the colors by modifying the CSS variables used throughout the project.

Customization Example

Base Colors

You can change the base colors by updating the following variables in your main stylesheet:

css
:root {
  --ac-primary: 255, 64, 93; /* New primary color */
  --ac-secondary: 213, 98, 251; /* New secondary color */
  --ac-dark: 33, 33, 33; /* New dark color */
  --ac-gray-100: 240, 240, 240; /* New light gray */
  --ac-gray-200: 200, 200, 200; /* New medium gray */
  --ac-gray-300: 160, 160, 160; /* New dark gray */
  --ac-success: 0, 200, 0; /* New success color */
  --ac-warning: 255, 220, 0; /* New warning color */
  --ac-danger: 255, 50, 50; /* New danger color */
}

Customized Color Modes

You can adjust the colors for both light and dark modes by modifying the corresponding variables in your stylesheet:

Customized Light Mode

css
.light,
:root,
[data-theme='light'] {
  color-scheme: light;
  --ac-color-100: var(--ac-white);
  --ac-color-200: var(--ac-gray-100);
  --ac-color-300: var(--ac-gray-200);
  --ac-color-400: var(--ac-gray-300);
  --ac-color-500: var(--ac-gray-400);
  --ac-color-600: var(--ac-gray-500);
  --ac-color-700: var(--ac-dark);
}

Customized Dark Mode

css
.dark,
[data-theme='dark'] {
  color-scheme: dark;
  --ac-color-100: var(--ac-dark);
  --ac-color-200: var(--ac-gray-500);
  --ac-color-300: var(--ac-gray-400);
  --ac-color-400: var(--ac-gray-300);
  --ac-color-500: var(--ac-gray-200);
  --ac-color-600: var(--ac-gray-100);
  --ac-color-700: var(--ac-white);
}

Tips

  • Consistency: Use these colors consistently to maintain a cohesive visual experience.

  • Contrast: Ensure that text and interactive elements are clearly visible and accessible.

  • Accessibility: Verify that the chosen colors are accessible to all users, including those with visual impairments.