Skip to content
Convert SharePoint modern themes to classic and classic themes to modern.
C#
Branch: master
Clone or download
Latest commit 47b8fed Sep 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ThemeConverter
.gitattributes Add .gitignore and .gitattributes. Sep 5, 2019
.gitignore Add .gitignore and .gitattributes. Sep 5, 2019
README.md Update README.md Sep 5, 2019
ThemeConverter.sln
classicpreview.png Add files via upload Sep 5, 2019
modernteam.png

README.md

SPTheme-Converter

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.

  1. Open the Program.cs file and add input and output local path values for the relevant conversion method(s) you need: ClassicToModern() or ModernToClassic().
  2. Uncomment the relevant conversion method(s) you need.
  3. 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

Converted Classic Theme (Preview)

Preview of Classic Theme

Converted Modern Theme (Team Site Home Page)

Modern Team Home Page

You can’t perform that action at this time.