Diamond Template layoutService config (colorScheme)

[MainAbdessamad]

Hello,
As defined in the documentation, to use default colorScheme, we need to do something like this:

export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig, private layoutService: LayoutService) { }

    ngOnInit(): void {
        this.primengConfig.ripple = true;       //enables core ripple functionality

        //optional configuration with the default configuration
        this.layoutService.config = {
            ripple: false,                      //toggles ripple on and off
            inputStyle: 'outlined',             //default style for input elements
            menuMode: 'static',                 //layout mode of the menu, valid values are "static", "overlay", "slim", "compact", "reveal", "drawer" and "horizontal"
            colorScheme: 'light',               //color scheme of the template, valid values are "light", "dim" and "dark"
            theme: 'blue',                      //default component theme for PrimeNG, see theme section for available values  
            menuTheme: "darkgray",              //theme of the menu, see menu theme section for available values  
            scale: 14                           //size of the body font size to scale the whole application
        };
    }
}

but i'ts not working for colorScheme if i use "dim" or "dark".

any suggestions to make it work ?
Thank you :)

[cetincakiroglu]

Hi,

Thanks a lot for reporting the issue, we're working on fixing it.

[MainAbdessamad]

Hi,

Thanks for your response.
Any update on this issue ? if not do we have an approximate date on when this issue will be resolved ?

Thank you :)

[phacour]

I came across the same issue. Any update?

[cetincakiroglu]

Hi,

Diamond has received the v17 update, you can download and use the updated part in the documentation. We've updated the broken part thanks to your report! We've utilized the Angular Signals to overcome the issue. Usage is as below.

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig, private layoutService: LayoutService) { }

    ngOnInit(): void {
        this.primengConfig.ripple = true;       //enables core ripple functionality

        //optional configuration with the default configuration
        const config: AppConfig = {
            ripple: false,                      //toggles ripple on and off
            inputStyle: 'outlined',             //default style for input elements
            menuMode: 'static',                 //layout mode of the menu, valid values are "static", "overlay", "slim", "compact", "reveal", "drawer" and "horizontal"
            colorScheme: 'light',               //color scheme of the template, valid values are "light", "dim" and "dark"
            theme: 'blue',                      //default component theme for PrimeNG, see theme section for available values  
            menuTheme: 'darkgray',              //theme of the menu, see menu theme section for available values  
            scale: 14                           //size of the body font size to scale the whole application
        };
        this.layoutService.config.set(config);
    }

}