Breaking News: Grepper is joining You.com. Read the official announcement!

Angular change CSS variable dynamically

Zany Zebra answered on December 10, 2022 Popularity 7/10 Helpfulness 4/10

answer Angular change CSS variable dynamically

related Angular change CSS variable dynamically

Angular change CSS variable dynamically

Comment

// app.component.ts@Component({
  selector: 'app-root',
  template: `    <h1>angular-dynamic-theme-example</h1>

    <div class="block primary-background">Primary</div>  <br>
    <div class="block secondary-background">Secondary</div>  <br>

    Set Primary Color: 
    <input type="text" [(ngModel)]="primaryColor"> <br>
    
    Set Secondary Color: 
    <input type="text" [(ngModel)]="secondaryColor"> <br>

    <button (click)="changeTheme(primaryColor,          secondaryColor)">Save</button>  `,
   styleUrls: ['./app.component.scss']
})
export class AppComponent {
  primaryColor: string;
  secondaryColor: string;

  constructor() {
    this.changeTheme('red', 'yellow'); // Set default theme
  }

  changeTheme(primary: string, secondary: string) {
    document.documentElement.style.setProperty('--primary-color', primary);
    document.documentElement.style.setProperty('--secondary-color', secondary);
  }
}

Popularity 7/10 Helpfulness 4/10 Language css

Source: medium.com

Tags: angular css

Link to this answer
Share Copy Link

Contributed on Dec 10 2022

Zany Zebra

0 Answers Avg Quality 2/10

Closely Related Answers

Angular change CSS variable dynamically

Comment

savePrimaryColor() {
  this.primaryColorPalette = computeColors(this.primaryColor);

  for (const color of this.primaryColorPalette) {
    const key1 = `--theme-primary-${color.name}`;
    const value1 = color.hex;
    const key2 = `--theme-primary-contrast-${color.name}`;
    const value2 = color.darkContrast ? 'rgba(black, 0.87)' : 'white';
    document.documentElement.style.setProperty(key1, value1);
    document.documentElement.style.setProperty(key2, value2);
  }
}

Popularity 6/10 Helpfulness 2/10 Language css

Source: medium.com

Tags: css angular

Link to this answer
Share Copy Link

Contributed on Dec 10 2022

Zany Zebra

0 Answers Avg Quality 2/10

Angular change CSS variable dynamically

Comment

// RIGHT, CSS variable can be directly referred by SASS variable
$primary-color: var(--my-primary-color);$accent-color: #fbbc04;

:root {
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color;

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color};
}

Popularity 6/10 Helpfulness 1/10 Language css

Source: medium.com

Tags: css angular

Link to this answer
Share Copy Link

Contributed on Dec 10 2022

Zany Zebra

0 Answers Avg Quality 2/10

Angular change CSS variable dynamically

Contents

More Related Answers

Angular change CSS variable dynamically

Closely Related Answers

Angular change CSS variable dynamically

Angular change CSS variable dynamically

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.