Угловой 5: Как определить цветовой поддон в центральном файле

Question

Я хочу объявить мой цветной поддон в центральном файле в моем проекте.

В настоящее время я использую Injectable, который содержит карту, чтобы ссылаться на все мои используемые цвета. Пример:

@Injectable()

export class COLOR_DICTIONARY {
private static COLOR_MAP: Map<string, string> = new Map<string, string>();

 constructor() {
    COLOR_DICTIONARY.COLOR_MAP.set('primary', '#339988');
 }

 get(key: string) {
    return COLOR_DICTIONARY.COLOR_MAP.get(key);
 }
}

Однако это заставляет меня ссылаться на все цвета в разметке, а не прямо в CSS, с помощью ngStyle

[ngStyle]="{'color': color_dictionary.get('primary')}"

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

Как я могу ссылаться на цветовую палитру в центральном файле - предпочтительно на более статичный файл, такой как XML-файл или что-то, на что можно ссылаться непосредственно в файлах CSS.

Я готов преобразовать стили в файлы scss, если это облегчит задачу или если это выгодно для этой цели.

Проект поставляется в комплекте с веб-пакетом, поэтому любые советы по комплектации решения для этого также приветствуются.

Answer 1

Хороший и современный способ - использовать переменные CSS. Глобальная поддержка довольно хороша, и это было рекомендовано ангулярным сообществом.

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1> Hello </h1>
    <h2> World </h2>
  `,
  styles: [
    'h1 { color: var(--primary); }',
    'h2 { color: var(--accent); }'
  ]
})
export class AppComponent {

  constructor() { }

  ngOnInit() {
    const colors = new Map([
      ['primary', 'blue'],
      ['accent', 'red'],
    ])

    Array.from(colors.entries()).forEach(([name, value]) => {
      document.body.style.setProperty(`--${name}`, value);
    })

  }
}

Живая демо