Skip to content
card background pattern
Level 1

Modern CSS Design Systems

Unlock Full Course

$49.99 $29.99

Or

$24.99/Month

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.

Downloads

Comments

User photo avatar
Karnell
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