DEV Community

Angela Damaso
Angela Damaso

Posted on

Angular 6: Dynamic Themes Without a Library

The concept of theming has been around as long as I can remember. Giving users the ability to choose the look and feel of your product has incredible value — it creates a more localized experience and reduces developer maintenance time.


How can we create something like this in our Angular apps?

Why Sass Alone Won’t Work

Although Sass variables may work to create a preset themed experience, the biggest drawback is that it can’t be manipulated by JavaScript. We need JavaScript to dynamically change the value of our variable!

Why Material Alone Won’t Work

Ever since Angular Material was released, developers have been flocking to this library to utilize their reusable components (not to mention built-in accessibility)

Material comes with built-in theming, but this may not work for two reasons:

  1. By default, Material comes with it’s own color palette that is optimized for accessibility. If you want to generate more colors, you’ll need to pass it into their mat-palette mixin or create a new theme file, using 3rd party tooling. This creates an external dependency and restricts the ability to switch themes without touching code.

  2. Although it is a great option, not everyone wants to use Material! Many developers do not wish to import an entire library to utilize components and opt to create their own.

The solution? Sass + CSS Variables!

If you have never used native CSS Custom Properties (I call them variables), there is a great article (here) to help you get started. The reason this approach works is because CSS variables can manipulated by JavaScript! With this combination, you can use a form to pass CSS variables to a Sass map, which can be used throughout the app.

Let’s See It!


This implementation:

  • Does not use any external libraries
  • Allows multiple components to dynamically change styles through a form
  • Saves the form as an object that can be saved in a database or local store
  • Has the capability to load an external object as a preloaded or preset style

Link to Demo:

Link to Stackblitz:

The Magic

The core principle behind this method is combining Sass maps and CSS Variables.

In thetheme.scss file, the default values are set and passed into a Sass map


// default colors
.theme-wrapper {
    --cardColor: #CCC;
    --cardBackground: #FFF;
    --buttonColor: #FFF;
    --buttonBackground: #FFF;
    --navColor: #FFF;
    --navBackground: #FFF;
    --footerColor: #FFF;
    --footerBackground: #FFF;
    --footerAlignment: left;
// pass variables into a sass map
$variables: (
    --cardColor: var(--cardColor),
    --cardBackground: var(--cardBackground),
    --buttonColor: var(--buttonColor),
    --buttonBackground: var(--buttonBackground),
    --navColor: var(--navColor),
    --navBackground: var(--navBackground),
    --footerColor: var(--footerColor),
    --footerBackground: var(--footerBackground),
    --footerAlignment: var(--footerAlignment)
Enter fullscreen mode Exit fullscreen mode

A function is created to return the native css variable from the global sass map


@function var($variable) {
    @return map-get($variables, $variable);
Enter fullscreen mode Exit fullscreen mode

The components can now read these two files to host a dynamic variable that changes upon form resubmit


@import '../../theme';
@import '../../functions';
.card {
    background-color: var(--cardBackground);
    color: var(--cardColor);
Enter fullscreen mode Exit fullscreen mode

The card’s background color is now #FFFFFF and text color is #CCCCCC

But how do we change the values?

Through the theme-picker component!

In our theme-picker.component.html file, we are using template forms with ngModel to create an object with a unique key (style) and value (input). The object then gets passed to the TypeScript file which dynamically overwrites the variable.


// searching the entire page for css variables
private themeWrapper = document.querySelector('body');
onSubmit(form) {
globalOverride(stylesheet) {
    if (stylesheet.globalNavColor) {'--navColor',     stylesheet.globalNavColor);
    if (stylesheet.globalButtonColor) {'--buttonColor',     stylesheet.globalButtonColor);
Enter fullscreen mode Exit fullscreen mode

The globalOverride function checks to see if a value exists for that specific variable, then replaces each CSS Variable with the new inputted one.


This code can be better optimized to scale (using preset style objects, saving/publishing styles on submit), so feel free to play around with it!

Discussion (15)

pcthien profile image

Thanks for your article,

Can you please help with my small concern?

Your default colors seem not working. I tried to change the value of them, but nothing happen.

// default colors <------ These one
.theme-wrapper {
--cardColor: #CCC;
--cardBackground: #FFF;
--buttonColor: #FFF;
--buttonBackground: #FFF;
--navColor: #FFF;
--navBackground: #FFF;
--footerColor: #FFF;
--footerBackground: #FFF;
--footerAlignment: left;

briancodes profile image
Brian • Edited on

This is a very good approach - I had a look at caniuse and css variables seem to be very well supported now, which is great! It's really helpful seeing a live demo too on StackBlitz ⚡

I have a question about the SCSS var funciton. When we are setting a value like: background-color: var(--navBackground);, the var(--navBackground) SCSS function is returning var(--navBackground). Is this step necessary do you think? If the colors are mapped 1 to 1, we might be able to skip this step? I might be missing something with this bit

adamaso profile image
Angela Damaso Author

Hi Brian, sorry for getting back so late to your comment! YES, var can be omitted, I am actually planning to update this article with an updated implementation that is a bit cleaner. Thanks for reading :)

danquack profile image
Daniel Quackenbush

FYI - I recently implemented this into my Angular 5 project. Great article, just wanted to share that it’s not just limited to Angular 6!

demonarxs1 profile image

Hey. Thanks for the code. But I have a question. Why are you using '$ variable' if it works without it too?

aayushregmi profile image

This article has been very helpful. But I had one question how can you handle darken and lighten function with css variables?

maximrobota profile image
Maxim • Edited on

Very important question !!!
$variables: (
--cardColor: darken(var(--cardColor), 50%),

argument $color of darken($color, $amount) must be a color

irisngu43545715 profile image
Iris Nguyen

This cannot work on IE 11. Do you have any idea :)

donqq profile image
Don Dilanga

CSS variables don't work with IE 11.

eugenekmd profile image
Eugene K

what about polyfill for css variables

nestorperez13 profile image

Very useful, thank you. For noobs like me you forgot to tell that the parent component should have the class theme-wrapper.

brandonjerz profile image
Brandon Jerz

I think you could even do this without sass. Just update the css variables using the setProperty function in ts. Oninit you can dynamically set the css variables to the users saved theme

tackgnol profile image
Adam Kościelniak

Any idea on getting it to work on IE 11 and Edge?

kennross profile image

This is awesome!

willwalker profile image
Walker Sousa

Need this slashes before? I can't use without slashes, why?