Access Theme Color Values With Sass
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.