Visual Studio Code: Colorize – Visualise Tenant Theme in PowerShell

Posted by

Quick tip: if you are building a modern SharePoint Online theme for your tenant, using PowerShell script and want to see the colours that represent the hex codes – consider installing Colorize for Visual Studio Code.

The colorize extension typically will look at your styles files looking for colours and generate a coloured background (using the hex code) for each of them. This is super handy, if you are using values for an existing installed theme or tweaking colours from the Fabric Theme Generator and need to see what colours they represent quickly

The plugin for Visual Studio Code can be found here: https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

Example:

Colorize-your-theme-JSON-1.jpg

In the above screenshot, this shows a preview of the colour in PowerShell. To achieve this, you need to modify “Colorize” to look at PowerShell file extensions and show the representative colour. Its quite simple, just add to your workplace settings the following lines:

Something else…

Whilst writing this post, I have discovered that Get-PnPTenantTheme cmdlet produces more values than the theme generator for example, the following are not/no longer produced by the Fabric theme generator:

  • bodyBackground
  • bodyText
  • primaryBackground
  • disabledText
  • disabledBackground
  • primaryText

In the theme JSON schema documentation, there is reference to additional values in addition to the above:

  • error
  • accent

However, these are not provided by the output from Get-PnPTenantTheme nor Get-SPOTheme if you treat the returned values as a reference. So in this case you will have to refer to the documentation for these setting values.

Useful Resources

Hope you find this useful.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.