PrimeNG 19 — Изменение цвета фона верхних и нижних колонтитулов ⇐ CSS

[Anonymous]

Я использую PrimeNG начиная с Angular 4. Я обновил свои приложения до Angular 18 и PrimeNG 17, потому что PrimeNG опаздывал с обновлением. На этой неделе я обновил свое первое приложение, добавив 19 последних версий Angular и PrimeNG. У меня возникли трудности с полной настройкой темы. Я нашел только эту статью «Переключение темной темы в Angular с PrimeNG 18 и Tailwind», документацию PrimeNG Theming и исходный код PrimeNG на github. У меня есть некоторый прогресс, но в настоящее время я застрял в настройке цвета фона и текста верхнего и нижнего колонтитула диалогового окна (см. нижнюю часть кода). Вот что я поместил в свой app.comComponent, вызываемый из конструктора:

Код: Выделить всё

...
export class AppComponent extends BaseComponent {
...
constructor(
private _baseSrvc: BaseCompService,
public _config: PrimeNG
) {
super( _baseSrvc );
...
this.setLocale( this._config, environment.locale );
}
setLocale( config: PrimeNG, locale: string ): void {
...
const auraPreset = definePreset(Nora, {
semantic: {
primary: {
50: '{blue.50}',
100: '{blue.100}',
200: '{blue.200}',
300: '{blue.300}',
400: '{blue.400}',
500: '{blue.500}',
600: '{blue.600}',
700: '{blue.700}',
800: '{blue.800}',
900: '{blue.900}',
950: '{blue.950}'
},
colorScheme: {
light: {
primary: {
color: '{blue.500}',
inverseColor: '#ffffff',
hoverColor: '{blue.600}',
activeColor: '{blue.700}'
},
highlight: {
background: '{blue.500}',
focusBackground: '{blue.500}',
color: '{blue.50}',
focusColor: '#ffffff'
}
},
dark: {
primary: {
color: '{blue.50}',
inverseColor: '{blue.950}',
hoverColor: '{blue.100}',
activeColor: '{blue.50}'
},
highlight: {
background: 'rgba(250, 250, 250, .16)',
focusBackground: 'rgba(250, 250, 250, .24)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
}
},
},
components: {
menubar: {
colorScheme: {
light: {
root: {
background: '{blue.500}',
color: '{blue.950}',
borderColor: '{blue.500}',
}
},
dark: {
root: {
background: '{blue.600}',
color: '{blue.50}',
borderColor: '{blue.600}',
}
}
}
},
datatable: {
colorScheme: {
dark: {
caption: {
background: '{blue.700}',
},
}
}
},
dialog: {
colorScheme: {
light: {
root: {
background: '{blue.50}',
color: '{blue.950}',
},
header: {
background: '{blue.300}',
},
footer: {
background: '{blue.300}',
}
},
dark: {
root: {
background: '{blue.800}',
color: '{blue.50}',
},
header: {
background: '{blue.900}',
},
footer: {
background: '{blue.900}',
}
}
}
}
}
});
config.theme.set({
preset: auraPreset,
options: {
darkModeSelector: '.p-dark',
},
});
}
}

Мой app.module выглядит примерно так:

Код: Выделить всё

import { NgModule } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
...
//
@NgModule({
declarations: [
...
],
imports: [
...
],
providers: [
...
provideAnimationsAsync( ),
providePrimeNG( )
],
bootstrap: [AppComponent]
})
export class AppModule { }

У меня также возникла проблема с заголовком в виде данных.
Спасибо за участие...

Подробнее здесь: https://stackoverflow.com/questions/793 ... nd-footers