Можем ли мы сделать динамическое обсуждение в приложении Angular2+, использующем SASS?
Я использую последнюю версию Angular 5. У нее есть механизм, который может загружать и применять CSS динамически на основе темы?
Да, пример с использованием пользовательских Материалов Темы:
styles.scss
@import './themes/theme-dark-green';
@import './themes/theme-pastel-red';
.pastel-red-theme {
@include angular-material-theme($pastel-red-theme);
}
.dark-green-theme {
@include angular-material-theme($dark-green-theme);
}
app.component.html
<div class="app-container"
[ngClass]="{'dark-green-theme': themeService.themeBox['dark-green'],
'pastel-red-theme': themeService.themeBox['pastel-red']">
....
</div>
ТемаСервис в основном обрабатывает активацию/деактивацию выбранной пользователем темы из других компонентов. Здесь нет ничего сложного.
Пример индивидуальной темы материала (но не очень красивая :)):
@import '~@angular/material/theming';
@include mat-core();
$md-mcgpalette0: (
50 : #fdeeee,
100 : #fbd4d4,
200 : #f9b8b8,
300 : #f69b9b,
400 : #f48585,
500 : #f27070,
600 : #f06868,
700 : #ee5d5d,
800 : #ec5353,
900 : #e84141,
A100 : #ffffff,
A200 : #ffffff,
A400 : #ffd3d3,
A700 : #ffb9b9,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
// custom background and foreground palettes
$pastel-red-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04),
card: white,
dialog: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
disabled-list-option: map_get($mat-grey, 200)
);
$pastel-red-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38)
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $pastel-red-theme-foreground,
background: $pastel-red-theme-background
);
}
$db-app-primary: mat-palette($md-mcgpalette0);
$db-app-accent: mat-palette($mat-blue);
$db-app-warn: mat-palette($mat-red);
$pastel-red-theme: create-custom-theme($db-app-primary, $db-app-accent, $db-app-warn);