🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Colors

The 📁 custom-style/_colors.scss file contains the color palette of your project.


🔍 On this page:

  1. Define color variables
  2. Main colors
  3. Feedback
  4. Color contrasts
  5. Black + White
  6. Themes
  7. Color functions
  8. Utility classes

Define Color Variables #

Each color is defined using the defineColorHSL mixin:

:root, [data-theme="default"] {
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
}

Which outputs in CSS:

:root, [data-theme="default"] {
  --color-primary: hsl(220, 90%, 56%);
  --color-primary-h: 220;
  --color-primary-s: 90%;
  --color-primary-l: 56%;
}

This method allows us to combine SASS color functions and CSS Variables.

🚀 Use the Color Editor to create and export a color palette compatible with CodyFrame

Main Colors #

These are the "Brand" colors, mostly used for interactive elements (e.g., buttons). Each color in this section has 5 color variations (base color + 2 lighter versions + 2 darker versions).

:root, [data-theme="default"] {
  // main
  @include defineColorHSL(--color-primary-darker, 220, 90%, 36%);
  @include defineColorHSL(--color-primary-dark, 220, 90%, 46%);
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
  @include defineColorHSL(--color-primary-light, 220, 90%, 66%);
  @include defineColorHSL(--color-primary-lighter, 220, 90%, 76%);

  @include defineColorHSL(--color-accent-darker, 355, 90%, 41%);
  @include defineColorHSL(--color-accent-dark, 355, 90%, 51%);
  @include defineColorHSL(--color-accent, 355, 90%, 61%);
  @include defineColorHSL(--color-accent-light, 355, 90%, 71%);
  @include defineColorHSL(--color-accent-lighter, 355, 90%, 81%);
}

Feedback #

Feedback colors are used to convey specific meanings like success/error/warning. Each color in this section has 5 color variations (base color + 2 lighter versions + 2 darker versions).

:root, [data-theme="default"] {
  // feedback
  @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
  @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
  @include defineColorHSL(--color-success, 94, 48%, 56%);
  @include defineColorHSL(--color-success-light, 94, 48%, 66%);
  @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

  @include defineColorHSL(--color-error-darker, 355, 90%, 41%);
  @include defineColorHSL(--color-error-dark, 355, 90%, 51%);
  @include defineColorHSL(--color-error, 355, 90%, 61%);
  @include defineColorHSL(--color-error-light, 355, 90%, 71%);
  @include defineColorHSL(--color-error-lighter, 355, 90%, 81%);

  @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
  @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
  @include defineColorHSL(--color-warning, 46, 100%, 61%);
  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
  @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);
}

Color Contrasts #

The color contrasts are used to define a scale of neutral colors:

:root, [data-theme="default"] {
  // color contrasts
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-contrast-lower, 0, 0%, 95%);
  @include defineColorHSL(--color-contrast-low, 240, 1%, 83%);
  @include defineColorHSL(--color-contrast-medium, 240, 1%, 48%);
  @include defineColorHSL(--color-contrast-high, 240, 4%, 20%);
  @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
}

To create a scale of contrasts you need two starting colors: 1) background color and 2) highest contrast color. You can then generate stop colors in between, using tools like the Color Editor.

While defining the scale, it helps to associate each color to an element of your UI:

  • color-bg → background color of the theme in use
  • color-contrast-lower → low contrast background
  • color-contrast-low → borders
  • color-contrast-medium → text subtle
  • color-contrast-high → text color
  • color-contrast-higher → text heading color

Here's an example of a contrast scale in a theme with a white background:

Black + White #

--color-white and --color-black represent white and black in your color palette:

:root, [data-theme="default"] {
  // black + white
  @include defineColorHSL(--color-black, 240, 8%, 12%);
  @include defineColorHSL(--color-white, 0, 0%, 100%);
}

Unlike the color contrasts, --color-white and --color-black are not affected by the theme in use. More info in the following Themes section.

Themes #

A theme is a group of related colors. The 📁 custom-style/_colors.scss file of CodyFrame includes a theme titled "default". To create a new theme, you can make a copy of the default theme and overwrite the values of the CSS variables (or use the Color Editor).

To apply a theme to a component or a group of components, add data-theme="{themeName}":

<div class="component" data-theme="dark">
  <!-- ... -->
</div>

If you use the color variables properly (in particular, the color contrasts) in your components, you can easily switch from a "light" to a "dark" theme.

In the example below, try changing the data-theme value to default/dark/soft in the HTML (the default theme is applied even if you don't specify the theme at all):

Considering the default theme in the example above, using --color-bg will return white. However, if you apply another theme, --color-bg will return a different color. If you want to set a white color that is not affected by the theme (e.g., for the text color of a button), you should use --color-white.

Color functions #

Use the color functions to modify the opacity and lightness of color variables.

Name Description
alpha(var(--color-name), {alphaValue}) SASS Function. Used to return a color with different opacity value.
lightness(var(--color-name), {lightnessValue}) SASS Function. Used to return color with different lightness value.

Here's an example:

.component {
  // return color with opacity 0.2
  color: alpha(var(--color-contrast-higher), 0.2);

  // return color with lightness equal to (--color-name-l*0.9)
  background-color: lightness(var(--color-primary), 0.9);
}

Utility Classes #

For a full list of color utility classes, refer to the Utilities page.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us