One of many cool announcements from Microsoft Ignite 2017, was the introduction of SharePoint Modern Themes. The SharePoint team have now launched a way to customise themes, colours and the presentation of Modern Sites.
Typically, theming of sites has been randomly chosen at the time of creation making it very difficult to apply consistent branding across SharePoint sites and Office 365 groups.
What do the new themes look like?
The above options can be found in the “Cog” in the suite bar > “Change the look”. Microsoft have an Office 365 theme and a SharePoint theme menu items, which feels a little confusing. Ensure you change the right one!
The out of the box options give you 6 colours: Blue, Orange, Red, Purple, Green and Gray; or there are 2 inverted themes Dark Yellow and Dark Blue. Clicking each one gives you the option of previewing the changes… nice!
Humm…. but my corporate colours are Hot Pink??
How to change them?
The SharePoint team have additionally released the capability to change and develop your own theme. Essentially, you need to design your new colour scheme for your theme which is then defined in a JSON file that is them uploaded to your tenant with a PowerShell script, REST API or CSOM APIs.
“design your new colour scheme” – fear not, to make it easier to do this, you can get a tool on the Office UI Fabric site to assist you in generating your themes colour scheme.
Once you have decided on your colour scheme, extract the hex codes into a JSON file or PowerShell formatted dictionary (provided on the site).
Be sure that you are running SharePoint Online Management Shell version 16.0.6906.1200 (15/09/2017) or higher.
I have written an example PowerShell script on GitHub to add the theme to your tenant:
In the example, I’ve used Hot Pink Hex Code: #ff69b4 – http://www.color-hex.com/color/ff69b4
Run the script, to add the following example to your tenant:
Violia! Looks good, don’t you think? 😉
Where to go next?
The SharePoint team have recently updated their documentation on their new docs site (which is awesome!) around this new feature including very detailed information on how to customise them further.