layoutConfig Primay Color

[mrzanirato]

Hello,

I'm using the news SAKAI theme

I would like to change a different default color to replace the emerald

I changed my layou.js file as shown but when I reload the page, all the elements return to the default emerald color.

const layoutConfig = reactive({ preset: 'Aura', primary: 'purple', surface: null, darkTheme: false, menuMode: 'static' });

Can someone help me, please?

Thanks

Marco

[bilal-the-dev]

same problem has anyone got the solution here?

[jonaskahn]

@mrzanirato @bilal-the-dev You'll see the config in layout.js, but it will not trigger when app render. There are two methods from primevue/themes can set the primary and surface:

• updatePreset -> update primary
• updateSurfacePalette -> update surface

How to make it work?

1. Two methods will only receive palette value not name ( purple, gray, etc )
2. You can get the platete in layout.js . It's primaryColors and surface
3. After get concrete palette value for primary and surface, please add two methods (updatePreset, updateSurfacePalette) into App.vue => onBeforeMount()

You can prefer my own implementation:

• https://github.com/jonaskahn/enhanced-sakai-vue/blob/master/src/layout/composables/theme.js
• https://github.com/jonaskahn/enhanced-sakai-vue/blob/master/src/App.vue

Here is the result of my modification: https://enhanced-sakai-vue.vercel.app

[cagataycivici]

Please use the discussions for support requests.