Change css variables dynamically in angular

Question

In my angular project, I have some css variables defined in top level styles.scss file like this. I use these variable at many places to keep the whole theme consistent. :root { --theme-color-1: #f7f7f7; --theme-color-2: #ec4d3b; --theme-color-3: #ffc107; --theme-color-4: #686250; --font-weight: 300 } How can I update values of these variables dynamically from app.component.ts ? And What is the clean way to do this in angular ? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

You can update them using document.documentElement.style.setProperty('--theme-color-1', '#fff'); If u want to update many values, then create a object this.styles = [ { name: 'primary-dark-5', value: "#111" }, { name: 'primary-dark-7_5', value: "#fff" }, ]; this.styles.forEach(data => { document.documentElement.style.setProperty(`--${data.name}`, data.value); }); The main thing here is document.documentElement.style.setProperty. This line allows you to access the root element (HTML tag) and assigns/overrides the style values. Note that the names of the variables should match at both places(css and js files) if you don't want to use document API, then you can use inline styles on HTML tag directly const styleObject = {}; this.styles.forEach(data => { styleObject[`--${data.name}`] = data.value; }); Then In your template file using ngStyle (https://angular.io/api/common/NgStyle) Set a collection of style values using an expression that returns key-value pairs. ... ... //not sure about quotes syntax Above methods do the same thing, "Update root element values" but in a different way. When you used :root, the styles automatically got attached to HTML tag