Создание пользовательских цветовых тем в Angular 7+ без использования библиотеки - PullRequest
Новая
       14

Создание пользовательских цветовых тем в Angular 7+ без использования библиотеки

0 голосов
/ 07 мая 2019

Кто-нибудь знает, как применять цветовые темы к проекту angular7 + без использования библиотеки (например, Angular Material или других).

Я использую SCSS для этого проекта.

Я хочу только изменить имя класса, чтобы изменить цвет всего сайта, но не переключать файл CSS для управления цветом. И это может добавить больше цветовой темы в будущем.

1 Ответ

0 голосов
/ 07 мая 2019

Я сделал что-то подобное (но пока только с файлом темы).

Вам не нужно изменять какой-либо файл стиля, и вы можете расширить его для большего количества файлов темы (возможно, измените их с помощьюраскрывающийся список в вашем макете).

Прежде всего, у меня есть сервис, подобный этому: 

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;
  }
}

Затем у меня есть компонент макета, и в его конструкторе я вызываю ThemeService следующим образом: 

this.themeService.applyDefaultTheme();

Этот файл темы будет применяться при создании компонента Layout.ThemeService может быть изменен для поддержки большего количества тем.

Файл theme_default.scss выглядит примерно так: 

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

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

, и я использую эти переменные в других файлах стилей,При этом изменение файла темы изменит цвета во всем приложении.

Надеюсь, это поможет. В следующий раз постарайтесь приложить немного больше усилий к вашему вопросу, так как его легче понять, если он хорошо задан, и вы предоставляете то, что уже пробовали.

...