Colors

This section describes the CSS variables that define the color palette used in the components. It also explains how light and dark modes are implemented to enhance user experience.

Color Variables

Base Variables

These variables are used to define primary, secondary, dark, and neutral colors. They are applied consistently across the project to maintain a coherent visual identity.

Variables

:root {
  --ac-transparent: transparent;
  --ac-current: currentColor;
  --ac-white: 255, 255, 255;
  --ac-primary: 64, 93, 255;
  --ac-secondary: 98, 251, 213;
  --ac-dark: 22, 22, 22;
  --ac-gray-100: 232, 232, 232;
  --ac-gray-200: 185, 185, 185;
  --ac-gray-300: 139, 139, 139;
  --ac-gray-400: 92, 92, 92;
  --ac-gray-500: 45, 45, 45;
  --ac-success: 0, 255, 0;
  --ac-warning: 255, 255, 0;
  --ac-danger: 255, 0, 0;
}

Color Modes

To enhance user experience, we use light and dark color modes that adjust automatically based on user preferences or system settings. This is achieved using specific classes and data attributes to determine the current theme.

Light Mode

.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);
}

  • Description: In light mode, we use lighter colors for backgrounds and primary elements, while text and prominent elements are darker.

  • Color Variables: Variables --ac-color-100 to --ac-color-700 are mapped to lighter colors, ending with --ac-dark for text and important elements.

Dark Mode

.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);
}

  • Description: In dark mode, we use darker colors for backgrounds and lighter colors for text and highlighted elements, reducing visual fatigue in low-light environments.

  • Color Variables: Variables --ac-color-100 to --ac-color-700 are inverted compared to light mode, starting with --ac-dark and ending with --ac-white for text and important elements.

Usage Examples

General Styles

css
body {
  background-color: rgb(var(--ac-color-100));
  color: rgb(var(--ac-color-700));
}


.card {
  background-color: rgb(var(--ac-color-200));
  border: 1px solid rgb(var(--ac-color-300));
}


.button {
  background-color: rgb(var(--ac-primary));
  color: rgb(var(--ac-white));
}