DEV Community

Angular 6: Dynamic Themes Without a Library

Angela Damaso on June 02, 2018

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 incredib...
Collapse
 
pcthien profile image
pcthien

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;
}

Collapse
 
briancodes profile image
Brian • Edited

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

Collapse
 
adamaso profile image
Angela Damaso

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 :)

Collapse
 
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!

Collapse
 
demonarxs1 profile image
Dmitry

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

Collapse
 
aayushregmi profile image
aayushregmi

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

Collapse
 
maximrobota profile image
Maxim • Edited

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

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

Collapse
 
irisngu43545715 profile image
Iris Nguyen

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

Collapse
 
donqq profile image
Don Dilanga

CSS variables don't work with IE 11.
caniuse.com/#feat=css-variables

Collapse
 
eugenekmd profile image
Eugene K

what about polyfill for css variables
github.com/jhildenbiddle/css-vars-...

Collapse
 
nestorperez13 profile image
NestorPerez13

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

Collapse
 
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

Collapse
 
tackgnol profile image
Adam Kościelniak

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

Collapse
 
kennross profile image
kenneross

This is awesome!

Collapse
 
willwalker profile image
Walker Sousa

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