default primaryColor : 'cyan'

[talhayksk]

hen I try to set the default primaryColor in app.config.ts and also in layout.service.ts, the color behaves inconsistently.

In app.config.ts I set:
providePrimeNG({ theme: { preset: Aura, options: { primaryColor: 'cyan', darkModeSelector: '.app-dark' } } });
And in layout.service.ts I define:
_config: layoutConfig = { preset: 'Aura', primary: 'cyan', surface: null, darkTheme: false, menuMode: 'static' };
Problem

When I run the app, the primaryColor is cyan as expected.

But when I refresh the page with F5, the color first shows as emerald for a moment and then switches to cyan.

Expected Behavior

The application should load the correct default primaryColor (cyan) immediately after refresh, without flashing the fallback emerald color.

Actual Behavior

On refresh, the app temporarily shows emerald (from _config) and only afterward switches to cyan.

Steps to Reproduce

Set primaryColor in app.config.ts.

Also set a different primary value in layout.service.ts.

Run the app.

Press F5 to refresh.

Notice the flicker from emerald → cyan.

Possible Cause

It seems like the layout.service.ts config is applied first on initialization, and then the global providePrimeNG config overrides it.

Question

Is this expected behavior or a bug?
If it’s expected, what’s the correct way to safely set a global default primaryColor without this flickering issue?

[ibnkhayatmed]

Your app flickers because it starts with emerald then switches to cyan, that's happening because primaryColor isn't actually a valid option in providePrimeNG and it's just being ignored

To fix this just make cyan the default from the start & define your own Aura preset with cyan as the primary color (check out the PrimeNG theming guide for more details)

import { provideHttpClient, withFetch } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
import { definePreset } from '@primeuix/themes';
import Aura from '@primeuix/themes/aura';
import { providePrimeNG } from 'primeng/config';
import { appRoutes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(appRoutes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()),
        provideHttpClient(withFetch()),
        provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: definePreset(Aura, {
                    semantic: {
                        primary: {
                            50: '{cyan.50}',
                            100: '{cyan.100}',
                            200: '{cyan.200}',
                            300: '{cyan.300}',
                            400: '{cyan.400}',
                            500: '{cyan.500}',
                            600: '{cyan.600}',
                            700: '{cyan.700}',
                            800: '{cyan.800}',
                            900: '{cyan.900}',
                            950: '{cyan.950}'
                        }
                    }
                }),
                options: { darkModeSelector: '.app-dark' }
            }
        })
    ]
};

Then just remove or comment the theme switching code from AppConfigurator ngOnInit method & make sure LayoutService has primary set to cyan so your UI highlights look consistent but don't trigger any theme changes when the app starts up..

[talhayksk]

@ibnkhayatmed thank you very much, the problem seems to have been resolved now.

[ibnkhayatmed]

Glad it helps !