Генерация Angular Material Theme

Question

Работая с Angular и в частности с Material, задался вопросом о динамической генерации темы.

Ситуация следующая:

С помощью этого ресурса я генерирую SASS объекты

$pallete: (
    50 : #e1e7ec,
    100 : #b5c3d0,
    200 : #839bb1,
    300 : #517392,
    400 : #2c557a,
    500 : #073763,
    600 : #06315b,
    700 : #052a51,
    800 : #042347,
    900 : #021635,
    A100 : #6d97ff,
    A200 : #3a73ff,
    A400 : #074fff,
    A700 : #0044ec,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #ffffff,
        A200 : #ffffff,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

Таких нужно три - для акцента, праймари и ворнинг.

Я могу создать сколько угодно файлов с самыми разными цветовыми темами и при onInit вставлять эту применять эту тему

const stylesheet = document.createElement('link');

stylesheet.addEventListener('load', () => {
  this.isStylesLoaded = true;
});

stylesheet.rel = 'stylesheet';
stylesheet.href = this.themeName + '.css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);

Предварительно подшаманив в angular.json

{
  "input": "src/assets/styles/theme/theme.scss",
  "inject": false,
  "bundleName": "theme"
},

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

БЛОГ НА HUSL

Генерация Angular Material Theme

Ответы (0 шт):