Themes

We provide several built-in themes for common use-cases. Create your own themes using the data-ccs-theme attribute

Example

css

[data-ccs-theme='oddbird'] {
  --ccs-prime--theme: 195;
  --ccs-accent--theme: 330;
  --ccs-special--theme: 24;
  --ccs-custom-hue: none;
}

[data-ccs-theme='complement']

scss

[data-ccs-theme='complement'] {
  --ccs-theme--1: calc(var(--ccs-h--prime) + 180);
  --ccs-theme--2: var(--ccs-theme--1);
}

Defines both --ccs-theme--1 and --ccs-theme--2 as the complement of the prime hue. Assign these to your generated colors as desired.

Example

css

[data-ccs-theme] {
  --ccs-accent1--theme: var(--ccs-theme--1);
  --ccs-accent2--theme: var(--ccs-theme--2);
}

[data-ccs-theme='triad']

scss

[data-ccs-theme='triad'] {
  --ccs-theme--1: calc(var(--ccs-h--prime) + 120);
  --ccs-theme--2: calc(var(--ccs-h--prime) - 120);
}

Defines --ccs-theme--1 and --ccs-theme--2 as triadic offsets from the prime hue: adding or subtracting 120 degrees. Assign these to your generated colors as desired.

[data-ccs-theme='adjacent']

scss

[data-ccs-theme='adjacent'] {
  --ccs-theme--1: calc(var(--ccs-h--prime) + 60);
  --ccs-theme--2: calc(var(--ccs-h--prime) - 60);
}

Defines --ccs-theme--1 and --ccs-theme--2 as adjacent offsets from the prime hue: adding or subtracting 60 degrees. Assign these to your generated colors as desired.

[data-ccs-theme="contrast"]

scss

[data-ccs-theme="contrast"] {
  --ccs-contrast: 200%;
  --ccs-custom-contrast: none;
}

Overrides all other contrast settings with a contrast of 200%.