Skip to content
card background pattern
Level 1

Modern CSS Design Systems

Unlock Full Course

$49.99 $29.99



Colors and Intentions

Here we will start defining our colors as CSS variables as well as variables that define the intentional use of the colors.



User photo avatar
4 months ago

Hope this saves someone a few moments of typing

:root { /* Define Colors as colors */ --green: #00ebc7; --red: #ff5470; --yellow: #fde24f; --black: #1b2d45; --darkBlue: #00214d; --grey: #bfbfbf; --lightGrey: #f2f4f6;

/* Define Colors intentions */ --background: var(--lightGrey); --textColor: var(--black); }

body { background: var(--background); color: var(--textColor); }

.dark { --background: var(--black); --textColor: var(--lightGrey); }

Something to say?

Become a Pro