Do you need to create a Modern theme based on an existing Classic theme? Or have you found that you need to leverage both Modern and Classic themes in your O365 SharePoint environment to ensure a consistent experience? Me, too!
So I created this app. :-)
NOTE: This application only works with valid SPColor file and UI Fabric Theme Designer JSON file inputs.
- Open the Program.cs file and add input and output local path values for the relevant conversion method(s) you need:
ClassicToModern()orModernToClassic(). - Uncomment the relevant conversion method(s) you need.
- Run the program.
The SharePoint (classic) Color Palette Tool exposes ~90 color slot settings. The UI Fabric Theme Designer has trimmed that number down to 21 color slot settings. (There are actually 22 slots that appear in an exported theme files, but only 21 of them are available in the UI application.)
For reference, here are the mapped values between SharePoint Modern and Classic theme palette slots:
| Modern Palette Slots | Classic Palette Slots |
|---|---|
| themePrimary | AccentText Hyperlink Hyperlinkfollowed CommandLinksHoverRowAccent NavigationAccent NavigationHover EmphasisBackground HeaderNavigationHoverText HeaderNavigationSelectedText SuiteBarBackground ContentAccent1 ContentAccent2 ContentAccent3 ContentAccent4 ContentAccent5 ContentAccent6 |
| neutralPrimary | BodyText WebPartHeading SearchURL HeaderText ButtonText ButtonGlyphActive |
| white | BackgroundOverlay PageBackground HeaderBackground FooterBackground EmphasisText SuiteBarText TileText |
| themeLighterAlt | ButtonHoverBackground |
| themeLighter | SelectionBackground HoverBackground NavigationHoverBackground |
| themeLight | StrongLines HeaderStrongLines ButtonPressedBackground ButtonHoverBorder |
| themeTertiary | SuiteBarHoverBackground |
| themeSecondary | AccentLines HeaderAccentLines ButtonPressedBorder |
| themeDarkAlt | EmphasisHoverBackground EmphasisBorder |
| themeDark | HyperlinkActive |
| themeDarker | CommandLinksPressed NavigationPressed EmphasisHoverBorder HeaderNavigationPressedText TileBackgroundOverlay |
| neutralLighterAlt | DisabledBackground HeaderDisabledBackground ButtonBackground ButtonDisabledBackground |
| neutralLighter | NavigationSelectedBackground SubtleEmphasisBackground TopBarBackground |
| neutralLight | DisabledLines DialogBorder HeaderDisabledLines ButtonDisabledBorder |
| neutralQuaternaryAlt | HeaderFlyoutBorder |
| neutralQuaternary | No Modern Designer setting available |
| neutralTertiaryAlt | SubtleLines HeaderSubtleLines SuiteBarDisabledText ButtonGlyphDisabled |
| neutralTertiary | DisabledText CommandLinksDisabled HeaderDisableText ButtonDisabledText |
| neutralSecondary | Lines HeaderLines ButtonBorder |
| neutralPrimaryAlt | SubtleBodyText HeaderSubtleText |
| neutralDark | CommandLinks Navigation SubtleEmphasisText TopBarText HeaderNavigationText ButtonGlyph |
| black | StrongBodyText SiteTitle CommandLinksSecondary SubtleEmphasisCommandLinks TopBarHoverText TopBarPressedText HeaderSiteTitle |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent