Primeng 19 - Изменение цвета фона на заголовки диалога и нижние колонтитулы [закрыто] ⇐ CSS

[Anonymous]

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

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

...
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',
},
});
}
}
< /code>
my app.module выглядит как следующее: < /p>
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 { }
< /code>
stackblitz Рабочий пример, вариант диалоговых документов.  В этом примере можно увидеть, что цвет контента был изменен на Blue-50, но заголовок и нижний колонтитул не были изменены на Blue-100, как я настроен. < /P>
Я Также есть проблема с подписью DataTable. 
Мое мнение выглядит следующим образом.
import { DialogDesignTokens } from '../../../../types/dialog';

export default {
root: {
background: '{overlay.modal.background}',
borderColor: '{overlay.modal.border.color}',
color: '{overlay.modal.color}',
borderRadius: '{overlay.modal.border.radius}',
shadow: '{overlay.modal.shadow}'
},
header: {
padding: '{overlay.modal.padding}',
gap: '0.5rem'
},
title: {
fontSize: '1.25rem',
fontWeight: '700'
},
content: {
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
},
footer: {
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}',
gap: '0.5rem'
}
} as DialogDesignTokens;
< /code>
Мой перевод ситуации заключается в том, что мой переопределение тематической конфигурации ограничена тем, что находится в вышеуказанной конфигурации по умолчанию.  То есть, поскольку фон .dialog Header не находится в соответствии с по умолчанию, поэтому необходимо использовать SCC для настройки фоновых значений.  Мой style.css выглядит следующим образом: < /p>
[data-color-scheme='light'] {
...
.p-dialog-header {
background: var(--p-primary-100, #fff );
}
.p-dialog-footer {
padding: 0.75rem 1.25rem;
background: var(--p-primary-100, #fff );
}
}
[data-color-scheme='dark'] {
...
.p-dialog-header {
background: var(--p-primary-950, #11a );
}
.p-dialog-footer {
padding: 0.75rem 1.25rem;
background: var(--p-primary-950, #11a );
}
}
< /code>
В моем переключении тем, я установил следующий атрибут данных в index.html: < /p>

Я использую атрибут данных color-scheme в style.css.

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