Customizing Colors

Customizing main colors

By default, css-theming will fall back to the following pre-defined colors map for each brightness:

// Colors used in light themes.
$ct-colors-light: (
  'grey': #697c93,
  'brown': #96663c,
  'yellow': #f1c40f,
  'orange': #f48701,
  'red': #ff1d25,
  'pink': #ff39f6,
  'purple': #952ff7,
  'violet': #c600ff,
  'indigo': #5700ff,
  'blue': #448aff,
  'green': #43b581,
) !default;

// Colors used in dark themes.
$ct-colors-dark: (
  'grey': #697c93,
  'brown': #96663c,
  'yellow': #f1c40f,
  'orange': #f69f34,
  'red': #ff3948,
  'pink': #ff61f8,
  'purple': #d835ff,
  'violet': #aa59f9,
  'indigo': #7933ff,
  'blue': #69a1ff,
  'green': #43b581,
) !default;

As you can tell, the defined color only mentions the main color. The main color refers to the 500 swatch of the color: --{color}-500, so in the case of red for example, it’ll be --red-500. All other swatches are computed dynamically by css-theming.

If you want to override the color map in the theme, you can provide a similar map. You’re free to define any number of colors from above, css-theming will fall back to the default for the other colors.

If you want to override the default for all themes, you can set $ct-colors-light or $ct-colors-dark to a new map of colors as long as they follow the same syntax. For example:

$ct-themes: (
  'default': (
    'brightness': 'light',
    'colors': (
      'red': #323232,
       ...
    )
  ),
  ...
);

Customizing semantic colors

Overriding semantic color targets is very similar, you’ll have to provide a similar map to the following default:

$ct-semantic-colors: (
  'primary': 'purple',
  'success': 'green',
  'info': 'blue',
  'warning': 'orange',
  'danger': 'red',
) !default;

$ct-semantic-colors maps a semantic color to a target color from the color map in the same theme. For example: primary to purple, success to green, and so on.

The map assigns a semantic color name (i.e primary) to a color target name from the color map in the same theme (i.e purple).

Customizing swatches

This is the default definition of the swatches in css-theming:

$ct-swatches: (
  50: 15%,
  75: 30%,
  100: 40%,
  200: 50%,
  300: 60%,
  400: 80%,
  500: 100%,
  600: 120%,
  700: 140%,
  800: 160%,
  900: 180%,
) !default;

css-theming uses this map to compute color swatches. You’re free to override this to anything you like. The key (i.e 50, 75, etc.) in the map will act as the swatch’s name. For example, from this map, the following variables will be produced for each color:

--{color}-50: ...
--{color}-75: ...
--{color}-100: ...
...

The value in the map will be used as the percentage of the mixing between the color and the whitish/blackish color css-theming chooses, depending on the theme’s brightness.

---

The same method follows for the rest of the props, you can always check the defaults in the src SCSS to figure out what you’re supposed to override.