不使用库在Angular 7+中创建自定义颜色主题

Question

Does anyone knows how to apply color themes to angular7+ project without using library(like Angular Material or others).

I am using SCSS for this project.

I want to only changing the class name at to change the whole website color, but not switching the css file for color control. And it's able to add more color theme in the future.

Answer 1

I did something similar (but only with a theme file so far).

You don't have to change any style file and you can extend this further for more theme files (maybe change them with a dropdown in your Layout).

First of all, I have a service like this:

const defaultTheme = require('../styles/themes/theme-default.scss');

@Injectable({
  providedIn: SharedModule
})
export class ThemeService {

  styleTag: any;

  constructor() {
    this._createStyle();
  } 

  applyDefaultTheme(){
    this.injectStylesheet(defaultTheme);
  }

  private _createStyle() {
    const head = document.head || document.getElementsByTagName('head')[0];
    this.styleTag = document.createElement('style');
    this.styleTag.type = 'text/css';
    this.styleTag.id = 'appthemes';
    head.appendChild(this.styleTag);
  }

  injectStylesheet(css) {
    this.styleTag.innerHTML = css;
  }
}

Then I have a Layout Component and in its constructor I call the ThemeService like this:

this.themeService.applyDefaultTheme();

This will apply the theme file as the Layout Component is created. The ThemeService can be changed to support more themes.

The theme_default.scss file looks something like this:

////////////////
    // SIDEBAR
    $sidebar-bg : $aside-bg;
    $sidebar-item-color : #FFFFFF;

    body,
    .wrapper .section-container {
      background-color: $content-bg;
    }
////////////////

and I use those variables in other style files. With that, changing the theme file will change the colors all over the app.

I hope this helps. Next time try to put a bit more effort in your question, as it is easier to understand if it is well asked and you provide what you already tried.