Угловой материал Набор цветов темы с палитрой цветов - PullRequest
Новая
       23

Угловой материал Набор цветов темы с палитрой цветов

0 голосов
/ 26 октября 2018

У меня есть приложение с несколькими темами материалов в файле theme.scss: 

// Light theme
$light-primary: mat-palette($mat-grey, 200, 500, 300);
$light-accent: mat-palette($mat-brown, 100);
$light-warn: mat-palette($mat-deep-orange, 200);

$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);

.light-theme {
  @include angular-material-theme($light-theme)
}

// Red theme
$red-primary: mat-palette($mat-red, 700, 500, 300);
$red-accent: mat-palette($mat-amber, 200);
$red-warn: mat-palette($mat-brown, 200);

$red-theme: mat-light-theme($red-primary, $red-accent, $red-warn);

.red-theme {
  @include angular-material-theme($red-theme)
}

. Если я хочу изменить тему приложения, я могу сделать это, переключая существующие темы.Теперь я хочу добавить функцию, позволяющую пользователю создавать свою собственную тему с помощью палитры цветов, которая устанавливает цвета $ primary, $ accent и $ warn в приложении, а затем публиковать новый созданный стиль в БД.

Я использую ngx-color-picker , чтобы установить цвета, но я не знаю, как установить пользовательскую тему и использовать ее при доступе пользователя.

Я используюУгловой 6 и материал 2

Спасибо за помощь

1 Ответ

0 голосов
/ 26 октября 2018

Поскольку стили scss должны быть скомпилированы в css, чтобы ваш браузер мог их понять, динамическое изменение scss не поможет, если мы не перекомпилируем стили на лету. Хотя это вариант, я полагаю, что это не самая эффективная для клиента компиляция стиля.

Другой способ сделать это включает использование переменных css в скомпилированном файле css темы и изменение значения этих переменных во время выполнения. Для этого вы можете использовать существующий файл theme.scss, но вам нужно будет скомпилировать его в css с помощью node-sass; из командной строки запустите:

node_modules/.bin/node-sass src/theme.scss -o outputFolder

Вы также можете использовать один из готовых файлов темы Material css. Откройте этот файл css и выполните поиск и замену всех экземпляров основного, акцентного и предупреждающего цветов для использования переменных css, например, var(--primary-color), var(--accent-color), var(--warn-color). Их может быть немного сложно найти, если только вы не знаете шестнадцатеричное значение цвета, который ищете, поэтому ищите .mat-primary, .mat-accent и .mat-warn, и вы найдете нужные вам шестнадцатеричные значения заменить на весь файл. Затем мы определим цвета темы по умолчанию для использования на корневом уровне: 

:root {
  --primary-color: purple;
  --accent-color: yellow;
  --warn-color: red;
}

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

document.body.style.setProperty('--primary-color', #someColor);
document.body.style.setProperty('--accent-color', #someColor);
document.body.style.setProperty('--warn-color', #someColor);

Вот блик стека , показывающий простую демонстрацию этой работы.

...