Introduction

As a SharePoint developer, you often need to work with themes and ensure that your customizations align with the current theme of the site. In this blog post, I will walk you through a SharePoint Framework (SPFx) solution that displays the theme colors of the current theme on a SharePoint site. This web part shows color blocks, the color theme names, and the color hex codes, making it easier to visualize and work with theme colors.

Project Overview

The main purpose of this project is to create a web part that dynamically retrieves and displays the theme colors of the current SharePoint theme. This can be particularly useful for developers and designers who need to ensure that their customizations are consistent with the site’s theme.

Key Features

• Dynamic Theme Retrieval: The web part retrieves the current theme colors from the SharePoint site.
• Color Blocks Display: Each theme color is displayed as a color block.
• Theme Name and Hex Code: The name and hex code of each theme color are displayed alongside the color block.
• Separation of Base and Other Colors: The theme colors are separated into base theme colors and other colors for better organization.

Implementation Details

Step 1: Retrieve Theme Colors

The web part retrieves the theme colors from the global window object, which contains the current theme state.

const ThemeColorsFromWindow: any = (window as any).__themeState__.theme;
const siteTheme: ITheme = createTheme({ palette: ThemeColorsFromWindow });
const palette = siteTheme.palette;

Step 2: Separate Theme Colors

The theme colors are separated into base theme colors and other colors. This is done by defining a list of base theme color keys and filtering the retrieved theme colors accordingly.

const baseThemeColorKeys = [
  "themePrimary", "themeLighterAlt", "themeLighter", "themeLight",
  "themeTertiary", "themeSecondary", "themeDarkAlt", "themeDark",
  "themeDarker", "neutralLighterAlt", "neutralLighter", "neutralLight",
  "neutralQuaternaryAlt", "neutralQuaternary", "neutralTertiaryAlt",
  "neutralTertiary", "neutralSecondaryAlt", "neutralSecondary",
  "neutralPrimaryAlt", "neutralPrimary", "neutralDark", "black",
  "white", "primaryBackground", "primaryText", "bodyBackground",
  "bodyText", "disabledBackground", "disabledText", "error", "accent"
];

const baseThemeColors: { key: string, value: string }[] = [];
const otherColors: { key: string, value: string }[] = [];

paletteEntries.forEach(entry => {
  if (baseThemeColorKeys.indexOf(entry.key) !== -1) {
    baseThemeColors.push(entry);
  } else {
    otherColors.push(entry);
  }
});

Step 3: Display Theme Colors

The theme colors are displayed as color blocks, with the theme name and hex code shown alongside each block.

return (
  <>
    <div>
      <div className='ms-Grid' dir='ltr'>
        <div className='ms-Grid-row'>
          <div className='ms-Grid-col ms-md4'>
            <h3>Base theme colors</h3>
          </div>
          {baseThemeColors.map(({ key, value }) => (
            <div key={key} className='ms-Grid-col ms-sm6 ms-md4 ms-lg2' style={{ backgroundColor: value, padding: '10px', margin: '5px' }}>
              {key}
            </div>
          ))}
        </div>
        <div className='ms-Grid-row'>
          <div className='ms-Grid-col ms-md4'>
            <h3>Other colors</h3>
          </div>
          {otherColors.map(({ key, value }) => (
            <div key={key} className='ms-Grid-col ms-sm6 ms-md4 ms-lg2' style={{ backgroundColor: value, padding: '10px', margin: '5px' }}>
              {key}
            </div>
          ))}
        </div>
      </div>
    </div>
  </>
);

Conclusion

This SPFx web part provides a simple yet effective way to visualize the theme colors of a SharePoint site. By displaying color blocks, theme names, and hex codes, it helps developers and designers ensure that their customizations are consistent with the site’s theme. Feel free to customize and extend this solution to fit your specific needs.

Source Code

You can find the complete source code for this project on GitHub: https://github.com/greian/SPToys/tree/main/ThemeColorsWebPart

Feedback

I hope you find this solution helpful. If you have any questions or feedback, please leave a comment below