Access Theme Color Values With Sass

Share this video with your friends

Send Tweet
Published 2 years ago
Updated a year ago

Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.

Stephanie Eckles: [0:00] Here, we have defined a set of color variables. We're going to make a map for our variables called theme-colors. A map in Sass is defined by a set of key value pairs within parentheses. We'll use the key from our variable names such as primary, referred to color-primary, and so on.

[0:22] Once our map is defined, we'll create a function called theme-color, which will intake a key. I will use the built-in map-get function to access our theme-colors map and return the value associated with the key. We can now apply our colors to our site components.

[0:44] Now that we have created the theme-color function to easily access the theme-colors mapped by key and have used the theme-color function throughout our styles, we can easily change any of these variables to quickly redeem our app.

[1:00] We'll update the primary and the support color variable values. Upon save, you can see that we now have a new theme applied to our application.

Andrey Shedko
Andrey Shedko
~ 2 years ago

What is the advantage of using function here instead of just importing variables like @use 'color.palette' as color, and use it as color.$white?