Modern Site Themes

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?

Theme in Office 365 Group
Example theme menu in Office 365 group
Office 365 Group - How to change theme
Office 365 Group – How to change theme

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.

Fabric Theme Generator Site

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:
https://github.com/CaPa-Creative-Ltd/SharePoint-PowerShell/blob/master/Examples/Add-ModernTheme-Example.ps1

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:

New Custom Theme Option
Office 365 Group – Hot Pink Custom Theme

Click “Save”

Applied Hot Pink Colour
Office 365 Group Applied Hot Pink Theme

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.

Advertisements

2 thoughts on “Modern Site Themes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s