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...
For further actions, you may consider blocking this person and/or reporting abuse
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;
}
This is a very good approach - I had a look at
caniuseand 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
varfunciton. When we are setting a value like:background-color: var(--navBackground);, thevar(--navBackground)SCSS function is returningvar(--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 bitHi 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 :)
This article has been very helpful. But I had one question how can you handle darken and lighten function with css variables?
Very important question !!!
$variables: (
--cardColor: darken(var(--cardColor), 50%),
argument
$colorofdarken($color, $amount)must be a colorFYI - I recently implemented this into my Angular 5 project. Great article, just wanted to share that it’s not just limited to Angular 6!
Hey. Thanks for the code. But I have a question. Why are you using '$ variable' if it works without it too?
This cannot work on IE 11. Do you have any idea :)
CSS variables don't work with IE 11.
caniuse.com/#feat=css-variables
what about polyfill for css variables
github.com/jhildenbiddle/css-vars-...
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
Any idea on getting it to work on IE 11 and Edge?
This is awesome!
Need this slashes before? I can't use without slashes, why?
Very useful, thank you. For noobs like me you forgot to tell that the parent component should have the class theme-wrapper.