The other day I got the request to see if we could modify the colors that appear under the standard colors within the Text web part so that they followed the client’s brand guidelines.

After digging around in Dev Tools for a bit I was able to determine which keys in the theme affected the standard colors.

Shows the fill color for the dark red colorShows the fill color for the dark red color

First I found the hex code for one of the fill colors in the DOM and then looked for it in the window.themestate.theme variable to identify the key.

Find the hex code for a specific colorFind the hex code for a specific color

I repeated this process for the rest of the colors and came up with the following keys:

  • redDark
  • red
  • yellow
  • yellowLight
  • greenLight
  • green
  • blueLight
  • blue
  • blueDark
  • purple

Those keys can be added to the end of a SharePoint theme definition and uploaded to SharePoint using PowerShell.

powershell
Connect-SPOService https://anthonyepoulin-admin.sharepoint.com
$theme = @{
"themePrimary" = "#03787c";
"themeLighterAlt" = "#f0f9fa";
"themeLighter" = "#c5e9ea";
"themeLight" = "#98d6d8";
"themeTertiary" = "#49aeb1";
"themeSecondary" = "#13898d";
"themeDarkAlt" = "#026d70";
"themeDark" = "#025c5f";
"themeDarker" = "#014446";
"neutralLighterAlt" = "#faf9f8";
"neutralLighter" = "#f3f2f1";
"neutralLight" = "#edebe9";
"neutralQuaternaryAlt" = "#e1dfdd";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c6c4";
"neutralTertiary" = "#a19f9d";
"neutralSecondary" = "#605e5c";
"neutralPrimaryAlt" = "#3b3a39";
"neutralPrimary" = "#323130";
"neutralDark" = "#201f1e";
"black" = "#000000";
"white" = "#ffffff";
"redDark" ="#5E0A01";
"red" = "#821414";
"yellow" = "#D7B377";
"yellowLight" = "#FFDC5C ";
"greenLight" = "#88D18A";
"green" = "#3FA242";
"blueLight" = "#8DC0F7";
"blue" = "#1A81EF";
"blueDark" = "#05284C";
"purple" = "#3D315B";
}
Add-SPOTheme -Identity "My Custom Theme" -Palette $theme -IsInverted $false
Out of the box Standard ColorsOut of the box Standard Colors
Updated Standard ColorsUpdated Standard Colors

Additional Resources

AaaS - Anthony as a Service