0

I've been researching how to implement a company branded theme. I found a great article: HOW TO CREATE A MULTICOLORED THEME FOR A MODERN SHAREPOINT ONLINE SITE

I tested this in the console: window.__themeState__.theme

And it returned significantly more values than in the article and in theme generators.

What I wonder is, can I utilize all these values below or is it recommended to use only the values created in the generator?


{themeDarker: "#002b4f", themeDark: "#003b6b", themeDarkAlt: "#00457e", themePrimary: "#004e8c", themeSecondary: "#125d9a", …}
AccentLines: "#125d9a"
AccentText: "#004e8c"
BackgroundOverlay: "rgba(255, 255, 255, 0.85)"
BodyText: "#323130"
ButtonBackground: "#faf9f8"
ButtonBorder: "#a19f9d"
ButtonDisabledBackground: "#faf9f8"
ButtonDisabledBorder: "#edebe9"
ButtonDisabledText: "#a19f9d"
ButtonGlyph: "#605e5c"
ButtonGlyphActive: "#323130"
ButtonGlyphDisabled: "#c8c6c4"
ButtonHoverBackground: "#c7dced"
ButtonHoverBorder: "#9abfdd"
ButtonPressedBackground: "#9abfdd"
ButtonPressedBorder: "#125d9a"
ButtonText: "#323130"
CommandLinks: "#605e5c"
CommandLinksDisabled: "#a19f9d"
CommandLinksHover: "#004e8c"
CommandLinksPressed: "#002b4f"
CommandLinksSecondary: "#201f1e"
ContentAccent1: "#004e8c"
ContentAccent2: "#00485b"
ContentAccent3: "#288054"
ContentAccent4: "#767956"
ContentAccent5: "#ed0033"
ContentAccent6: "#682a7a"
DialogBorder: "#f3f2f1"
DisabledBackground: "#faf9f8"
DisabledLines: "#edebe9"
DisabledText: "#a19f9d"
EmphasisBackground: "#004e8c"
EmphasisBorder: "#003b6b"
EmphasisHoverBackground: "#003b6b"
EmphasisHoverBorder: "#002b4f"
EmphasisText: "#ffffff"
FooterBackground: "rgba(255, 255, 255, 0.85)"
HeaderAccentLines: "#125d9a"
HeaderBackground: "rgba(255, 255, 255, 0.85)"
HeaderDisableText: "#a19f9d"
HeaderDisabledBackground: "#faf9f8"
HeaderDisabledLines: "#edebe9"
HeaderLines: "#a19f9d"
HeaderNavigationHoverText: "#004e8c"
HeaderNavigationPressedText: "#002b4f"
HeaderNavigationSelectedText: "#004e8c"
HeaderNavigationText: "#605e5c"
HeaderSiteTitle: "#201f1e"
HeaderStrongLines: "#9abfdd"
HeaderSubtleLines: "#c8c6c4"
HeaderSubtleText: "#8a8886"
HeaderText: "#323130"
HoverBackground: "rgba(199, 220, 237, 0.50)"
Hyperlink: "#004e8c"
HyperlinkActive: "#002b4f"
Hyperlinkfollowed: "#002b4f"
Lines: "#a19f9d"
Navigation: "#605e5c"
NavigationAccent: "#004e8c"
NavigationHover: "#004e8c"
NavigationHoverBackground: "rgba(199, 220, 237, 0.50)"
NavigationPressed: "#002b4f"
NavigationSelectedBackground: "rgba(237, 235, 233, 0.78)"
PageBackground: "#ffffff"
RowAccent: "#004e8c"
SelectionBackground: "rgba(154, 191, 221, 0.50)"
SiteTitle: "#201f1e"
StrongBodyText: "#201f1e"
StrongLines: "#9abfdd"
SubtleBodyText: "#8a8886"
SubtleEmphasisBackground: "#f3f2f1"
SubtleEmphasisCommandLinks: "#201f1e"
SubtleEmphasisText: "#605e5c"
SubtleLines: "#c8c6c4"
SuiteBarBackground: "#004e8c"
SuiteBarDisabledText: "#edebe9"
SuiteBarHoverBackground: "#4a88ba"
SuiteBarHoverText: "#9abfdd"
SuiteBarText: "#ffffff"
TileBackgroundOverlay: "rgba(0, 0, 0, 0.50)"
TileText: "#ffffff"
TopBarBackground: "rgba(237, 235, 233, 0.78)"
TopBarHoverText: "#323130"
TopBarPressedText: "#002b4f"
TopBarText: "#605e5c"
WebPartHeading: "#323130"
accent: "#03787c"
accentButtonBackground: "#03787c"
accentButtonText: "#ffffff"
actionLink: "#323130"
actionLinkHovered: "#201f1e"
backgroundOverlay: "rgba(255, 255, 255, 0.85)"
black: "#000000"
blackTranslucent40: "rgba(0,0,0,.4)"
blockingBackground: "#FDE7E9"
blockingIcon: "#FDE7E9"
blue: "#0078d4"
blueDark: "#002050"
blueLight: "#00bcf2"
blueMid: "#00188f"
bodyBackground: "#ffffff"
bodyBackgroundChecked: "#edebe9"
bodyBackgroundHovered: "#f3f2f1"
bodyDivider: "#edebe9"
bodyFrameBackground: "#ffffff"
bodyFrameDivider: "#edebe9"
bodyStandoutBackground: "#faf9f8"
bodySubtext: "#605e5c"
bodyText: "#323130"
bodyTextChecked: "#000000"
buttonBackground: "#ffffff"
buttonBackgroundChecked: "#c8c6c4"
buttonBackgroundCheckedHovered: "#edebe9"
buttonBackgroundDisabled: "#f3f2f1"
buttonBackgroundHovered: "#f3f2f1"
buttonBackgroundPressed: "#edebe9"
buttonBorder: "#8a8886"
buttonBorderDisabled: "#f3f2f1"
buttonText: "#323130"
buttonTextChecked: "#201f1e"
buttonTextCheckedHovered: "#000000"
buttonTextDisabled: "#a19f9d"
buttonTextHovered: "#201f1e"
buttonTextPressed: "#201f1e"
cardShadow: "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)"
cardShadowHovered: "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)"
cardStandoutBackground: "#ffffff"
defaultStateBackground: "#faf9f8"
dialogBorder: "#f3f2f1"
disabledBackground: "#f3f2f1"
disabledBodySubtext: "#c8c6c4"
disabledBodyText: "#a19f9d"
disabledBorder: "#c8c6c4"
disabledSubtext: "#d2d0ce"
disabledText: "#a19f9d"
elevation4: "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)"
elevation8: "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)"
elevation16: "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)"
elevation64: "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)"
errorBackground: "#FDE7E9"
errorIcon: "#A80000"
errorText: "#a4262c"
focusBorder: "#605e5c"
green: "#107c10"
greenDark: "#004b1c"
greenLight: "#bad80a"
infoBackground: "#f3f2f1"
infoIcon: "#605e5c"
inputBackground: "#ffffff"
inputBackgroundChecked: "#004e8c"
inputBackgroundCheckedHovered: "#003b6b"
inputBorder: "#605e5c"
inputBorderHovered: "#323130"
inputFocusBorderAlt: "#004e8c"
inputForegroundChecked: "#ffffff"
inputIcon: "#004e8c"
inputIconDisabled: "#a19f9d"
inputIconHovered: "#003b6b"
inputPlaceholderBackgroundChecked: "#c7dced"
inputPlaceholderText: "#605e5c"
inputText: "#323130"
inputTextHovered: "#201f1e"
largeFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
largeFontSize: "18px"
largeFontWeight: 400
largeMozOsxFontSmoothing: "grayscale"
largeWebkitFontSmoothing: "antialiased"
link: "#004e8c"
linkHovered: "#002b4f"
listBackground: "#ffffff"
listHeaderBackgroundHovered: "#f3f2f1"
listHeaderBackgroundPressed: "#edebe9"
listItemBackgroundChecked: "#edebe9"
listItemBackgroundCheckedHovered: "#e1dfdd"
listItemBackgroundHovered: "#f3f2f1"
listText: "#323130"
listTextColor: "#323130"
magenta: "#b4009e"
magentaDark: "#5c005c"
magentaLight: "#e3008c"
mediumFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
mediumFontSize: "14px"
mediumFontWeight: 400
mediumMozOsxFontSmoothing: "grayscale"
mediumPlusFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
mediumPlusFontSize: "16px"
mediumPlusFontWeight: 400
mediumPlusMozOsxFontSmoothing: "grayscale"
mediumPlusWebkitFontSmoothing: "antialiased"
mediumWebkitFontSmoothing: "antialiased"
megaFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
megaFontSize: "68px"
megaFontWeight: 600
megaMozOsxFontSmoothing: "grayscale"
megaWebkitFontSmoothing: "antialiased"
menuBackground: "#ffffff"
menuDivider: "#c8c6c4"
menuHeader: "#004e8c"
menuIcon: "#004e8c"
menuItemBackgroundChecked: "#edebe9"
menuItemBackgroundHovered: "#f3f2f1"
menuItemBackgroundPressed: "#edebe9"
menuItemText: "#323130"
menuItemTextHovered: "#201f1e"
messageLink: "#005A9E"
messageLinkHovered: "#004578"
messageText: "#323130"
neutralDark: "#201f1e"
neutralLight: "#edebe9"
neutralLighter: "#f3f2f1"
neutralLighterAlt: "#faf9f8"
neutralPrimary: "#323130"
neutralPrimaryAlt: "#3b3a39"
neutralQuaternary: "#d2d0ce"
neutralQuaternaryAlt: "#e1dfdd"
neutralSecondary: "#605e5c"
neutralSecondaryAlt: "#8a8886"
neutralTertiary: "#a19f9d"
neutralTertiaryAlt: "#c8c6c4"
orange: "#d83b01"
orangeLight: "#ea4300"
orangeLighter: "#ff8c00"
primaryBackground: "#ffffff"
primaryButtonBackground: "#004e8c"
primaryButtonBackgroundDisabled: "#f3f2f1"
primaryButtonBackgroundHovered: "#00457e"
primaryButtonBackgroundPressed: "#003b6b"
primaryButtonBorder: "transparent"
primaryButtonText: "#ffffff"
primaryButtonTextDisabled: "#d2d0ce"
primaryButtonTextHovered: "#ffffff"
primaryButtonTextPressed: "#ffffff"
primaryText: "#333333"
purple: "#5c2d91"
purpleDark: "#32145a"
purpleLight: "#b4a0ff"
red: "#e81123"
redDark: "#a4262c"
roundedCorner2: "2px"
roundedCorner4: "4px"
roundedCorner6: "6px"
severeWarningBackground: "#FED9CC"
severeWarningIcon: "#D83B01"
smallFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
smallFontSize: "12px"
smallFontWeight: 400
smallInputBorder: "#605e5c"
smallMozOsxFontSmoothing: "grayscale"
smallPlusFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
smallPlusFontSize: "12px"
smallPlusFontWeight: 400
smallPlusMozOsxFontSmoothing: "grayscale"
smallPlusWebkitFontSmoothing: "antialiased"
smallWebkitFontSmoothing: "antialiased"
successBackground: "#DFF6DD"
successIcon: "#107C10"
successText: "#107C10"
suiteBarBackground: "#004e8c"
suiteBarDisabledText: "#edebe9"
suiteBarText: "#ffffff"
superLargeFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
superLargeFontSize: "42px"
superLargeFontWeight: 600
superLargeMozOsxFontSmoothing: "grayscale"
superLargeWebkitFontSmoothing: "antialiased"
teal: "#008272"
tealDark: "#004b50"
tealLight: "#00b294"
themeAccent: "#004e8c"
themeAccentTranslucent10: "rgba(0, 78, 140, 0.10)"
themeDark: "#003b6b"
themeDarkAlt: "#00457e"
themeDarker: "#002b4f"
themeLight: "#9abfdd"
themeLighter: "#c7dced"
themeLighterAlt: "#f0f6fa"
themePrimary: "#004e8c"
themeSecondary: "#125d9a"
themeTertiary: "#4a88ba"
tinyFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
tinyFontSize: "10px"
tinyFontWeight: 400
tinyMozOsxFontSmoothing: "grayscale"
tinyWebkitFontSmoothing: "antialiased"
topBarBackground: "rgba(237, 235, 233, 0.78)"
topBarHoverText: "#323130"
topBarText: "#605e5c"
variantBorder: "#edebe9"
variantBorderHovered: "#a19f9d"
warningBackground: "#FFF4CE"
warningHighlight: "#ffb900"
warningIcon: "#797775"
warningText: "#323130"
white: "#ffffff"
whiteTranslucent40: "rgba(255, 255, 255, 0.40)"
xLargeFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xLargeFontSize: "20px"
xLargeFontWeight: 600
xLargeMozOsxFontSmoothing: "grayscale"
xLargePlusFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xLargePlusFontSize: "24px"
xLargePlusFontWeight: 600
xLargePlusMozOsxFontSmoothing: "grayscale"
xLargePlusWebkitFontSmoothing: "antialiased"
xLargeWebkitFontSmoothing: "antialiased"
xSmallFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xSmallFontSize: "10px"
xSmallFontWeight: 400
xSmallMozOsxFontSmoothing: "grayscale"
xSmallWebkitFontSmoothing: "antialiased"
xxLargeFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xxLargeFontSize: "28px"
xxLargeFontWeight: 600
xxLargeMozOsxFontSmoothing: "grayscale"
xxLargePlusFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xxLargePlusFontSize: "32px"
xxLargePlusFontWeight: 600
xxLargePlusMozOsxFontSmoothing: "grayscale"
xxLargePlusWebkitFontSmoothing: "antialiased"
xxLargeWebkitFontSmoothing: "antialiased"
yellow: "#ffb900"
yellowDark: "#d29200"
yellowLight: "#fff100"
1

The new SharePoint site theming features use a JSON schema to store color settings and other information about each theme.

It is recommended to use the values mentioned in below official Microsoft documentation:

SharePoint site theming: JSON schema

An online Theme Generator tool can help you to define new custom themes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.