Is it possible in Angular to switch css styles dynamically using a toggle button for example:

Question

I want to switch between these CSS styles dynamically using a toggle button in angular to make a dark/light mode:

@import '../node_modules/bootswatch/dist/darkly/bootstrap.min.css';
@import '../node_modules/bootswatch/dist/united/bootstrap.min.css';

If possible, what is the cleanest and efficient way to do it?

You may get some ideas from [this post](https://stackoverflow.com/q/19192747/1009922). — ConnorsFan, Sep 17 '19 at 01:52
Thanks, @ConnorsFan now I have to think how to translate vanilla js to angular, it would not be easy but this post will give me a head start. — Eduardo A. Fernández Díaz, Sep 17 '19 at 01:59

score 4 · Accepted Answer · answered Sep 22 '19 at 17:49

This is how I solved this problem.I'm gonna leave the answer here in case some finds it useful when running into the same task. It is just a start, feel free to add a transition or extend this method:

1) Copied the bootstrap themes folders into the assets folder as shown:

2) Added a link as the last line of the index.html file so it would override any injected style by Angular:

3) Added a toggle button to my nav component.html template:

<nav>
......
<div class="custom-control custom-switch ml-2">
      <input (click)="changeTheme()" type="checkbox" class="custom-control-input" id="customSwitch1">
      <label class="custom-control-label" for="customSwitch1"></label>
  </div>
</nav>

4) Added the changeTheme() method to the nav.component.ts file:

import { Component, OnInit } from '@angular/core';
....
export class NavComponent implements OnInit {
  isDarkTheme = false;

  constructor() { }

  ngOnInit() {
  }
/** Rest of the methods of the class are hidden **/
  changeTheme(): void {
    if (this.isDarkTheme) {
       document.getElementById('global-theme').setAttribute('href', 'assets/styles/united/bootstrap.min.css');
       this.isDarkTheme = false;
    } else {
       document.getElementById('global-theme').setAttribute('href', 'assets/styles/darkly/bootstrap.min.css');
       this.isDarkTheme = true;
    }
 }
}

4) Here is a demo:

Is it possible in Angular to switch css styles dynamically using a toggle button for example:

1 Answers1