Как динамически переопределить все начальные/вторичные цвета начальной/вторичной/вторичные цвета во время выполнения в у ⇐ CSS

[Anonymous]

Я строю угловое приложение 19, которое загружает его основные и вторичные цвета бренда из бэкэнд API во время выполнения. /> Я попытался использовать пользовательские свойства CSS (--BS-Primary,--BS-Secondator) и динамически обновить их, но, хотя некоторые компоненты правильно обновляются, кнопки изложений и другие элементы все еще возвращаются к первоначально скомпилированным цветам начальной загрузки или ведут себя неправильно < /p>
mithememememe.scss>> @import 'bootstrap/scss/functions';

$primary: var(--bs-primaryColor) !default;
$secondary: var(--bs-secondaryColor) !default;
//primaryColor and secondaryColor will be coming from backend and we will override bootstrap primary and secondary

$theme-colors: (
'primary': $primary,
'secondary': $secondary,
);

@function theme-color($key: 'primary') {
@return map.get($theme-colors, $key);
}

:root {
@each $color, $value in $theme-colors {
--#{$color}: #{$value};
}
}

@import 'bootstrap/scss/bootstrap';
< /code>
Aapp.component.ts
export class AppComponent {
theme: any = {
primaryColor: '#522181',
theme: 'mytheme',
}; //will come from backend

constructor() {
this.applyDynamicTheme(this.theme);
}

applyDynamicTheme(theme: any) {
document.documentElement.style.setProperty('--primaryColor',theme.primaryColor);
document.getElementById('theme-style') ?.setAttribute('href', 'assets-' + theme.theme + '.css?v=1.0');
this.sanitizer.bypassSecurityTrustStyle('assets-' + theme.theme + '.css?v=1.0');
// this will load mytheme.scss
}
}
< /code>
Что я попробовал: < /p>

• Попытался обновить его во время выполнения с помощью document.documentelement.style.setproperty. < /li>
  Переверните. />Added overrides for --bs-primary-rgb and text-emphasis variables.

Expected:

• All Bootstrap components should pick up the backend-provided primary/secondary colors automatically, including hover/active states for outline buttons, alerts, badges, etc., without rebuilding SCSS каждый раз или вручную переоценивая каждый отдельный класс. цвета.

Здесь перепроводите в Stackblitz

Подробнее здесь: https://stackoverflow.com/questions/797 ... at-runtime