Color and Theming

Carrot CSS embrace the concept of Design Tokens, a concept introduced by @jina and you can read more about it there on this post or check what how Adobe handles their design tokens.

Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.

From the Design tokens documentation from Adobe design system

Carrot CSS use design tokens so you'll use color named by their usage, not an actual color name.
You'll use variables named like --color-text-dark or --color-border instead of --dark-blue or --light-blue-200.

See themes/_default.scss file on Github
See themes/_dark.scss file on Github

To make it to your colors, you can create a theme or edit the existing ones, default and dark.

The simple way: Customize existing themes

Before thinking of creating a full theme, you might want to just overwrite the existing colors that you need to overwrite. Most likely the interactive variables.
Your branding color or main color is what we name interactive color in a theme.
An interactive color would be used for buttons, links and anything you want to stand out in your designs.

This is how you can overwrite the default theme:

:root,
.theme-default {
  --color-interactive: var(--pink-400);
  --color-interactive-light: var(--pink-300);
  --color-interactive-lighter: var(--pink-200);
  --color-interactive-dark: var(--pink-500);
  --color-interactive-darker: var(--pink-600);
  --color-interactive--reverse: var(--pink-50);
}

And this is how you can overwrite the dark one:

.theme-dark {
  --color-interactive: var(--pink-400);
  --color-interactive-light: var(--pink-300);
  --color-interactive-lighter: var(--pink-200);
  --color-interactive-dark: var(--pink-500);
  --color-interactive-darker: var(--pink-600);
  --color-interactive--reverse: var(--pink-50);
}

When you have theme you can use them by using the theme-default or theme-dark on the element you need to theme.