Custom color palette reverts to default after refresh page

[vomos2020]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [X] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Describe the bug / error

We use custom color palette for branding custom spfx web parts. We are facing an issue that after some time after refreshing setting in spfx webpart custom colors became reverting to default colors. We checked on different tenants and this issue reproducing only on specific tenant not on all.

We used Add-SPOTheme -Name "Custom theme" -Palette $palette -IsInverted $false to deploy custom palette.

Steps to reproduce

1. Upload new color palette
2. Apply new color palette on Site collection.
3. Click Save. Result: colors applied to spfx webparts
4. Refresh the page. Result: color reverted to default values on all webparts

Expected behavior

After applying new color palette color must change on all custom spfx webparts

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@vomos2020 - could you please provide more information on this issue?

• how do you use/apply the palette in your custom code?
• do out of the box web part respect the new palette when the custom SPFx web parts don't?
• could you please share the palette definition?

[sosandumsft]

@AJIXuMuK here's the theme definition $palette= @{ "sb_themePrimary" = "#06858С"; "sb_themeSecondary" = "#fff200" ; "sb_themeTertiary" = "#fff200" ; "sb_neutralPrimaryAlt" = "#27251f"; "sb_neutralPrimary" = "#27251f"; "sb_themeLight" = "#fffccc"; "sb_themeLighter" = "#fffee5"; "sb_yellow" = "#fdba00"; "sb_accent"= "#ff3d00"; "sb_neutralTertiaryAlt" = "#27251f"; "sb_neutralQuaternary" = "#27251f"; "sb_neutralQuaternaryAlt" = "#90a0b7"; "sb_neutralLight" = "#e6effd"; "sb_neutralSecondary" = "#f9fafc"; "sb_black" = "#000000"; "sb_white" = "#ffffff"; "themePrimary" = "#27251F"; } Add-SPOTheme -Name "Test Intranet" -Palette $palette -IsInverted $false Add the attached web part to a modern home page also add an OOTB button. theme-test.zip Change the site theme to Test Intranet The right side of web part will change it's colors also the Button color. Refresh the page - colors will revert on the right side but the OOTB button will remain with theme. We need to wait also for @vomos2020 developer to answer question 1 (from spfx I assume that is using it's own theme and palette).

[vomos2020]

@AJIXuMuK hi, we use this in code export const theme = window.themeState?.theme; export const spTheme = { themePrimary: theme?.sb_themePrimary, themeSecondary: theme?.sb_themeSecondary, ... };

[CallumCrowley]

@AJIXuMuK we've also noticed this bug on multiple tenants. We've uploaded a custom theme using Add-SPOTheme but the value for neutralLighter reverts to a default SharePoint colour (#F0F0F0) after a page refresh.

[AJIXuMuK]

@vomos2020 @sosandumsft - unfortunately we don't support custom properties in the theme (sb_ prefixed ones in your case). I would recommend having a mapping where based on the primary color of the theme you can grab all others from your custom code.

@CallumCrowley - the issue with neutral colors has been discussed here and here

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues