Article
0 comment

Why and how to add multiple themes using Office 365 CLI

No matter what your preferred operating system or device is, you can develop and deploy for SharePoint whatever you want to use. Even for the deploy modern experience components for branding such as themes for the modern experience.

In my case, I work mostly on Mac occasionally on Windows, whatever serves its purpose best. Sometimes I write PowerShell Scripts to configure things on Office 365, but there is a new option other than PowerShell, but those configuration changes nowadays are even possible through classic bash scripts through the opportunities provided by the Office 365 CLI.

Enough said on the new possibility let’s look why it might make sense to have multiple different themes available.

Why multiple themes?

Right now real branding options for SharePoint are limited to a custom header, footer, web parts and custom themes.

You might have recognised that any Office 365 application comes with its colours. So why not estate application brand colours to identify the purpose of specific team or collaboration sites.

You still need to make sure that your overall company brand message is intact, but most organisation already have colour palettes in their modern design strategy on not only two or three colours. Besides you can give your end user some colour guidance in which purposed team site or communication site they are currently.

You find similar guidance for example on public transportation line where the main underground lines have their colours.

Colours use to identify different The Tube (London Underground) line, the colours of individual lines will be used in the branding of stations too.

Those colour not only gets used on the map but also the stations are branded to easier identify if you are on the correct station of the right line.

In my case, I created merely three different themes for some business purposes.

  • A blue theme – for general collaboration aka team sites
  • A green theme – for all project sites
  • A red theme – for the use of communication sites

Instead to deploy those three themes just named after the primary colour I can assign a meaning to those themes.

I generated these themes on the Office 365 Theme Generator and saved the files as JSON files. The JSON files can reuse and applied to different tenants for development and testing and can be check in to a source control system.

How to deploy?

Like I mentioned, in the beginning, I use nowadays the Office 365 CLI a lot. Mostly, I work on a Mac so to write a bash script instead of writing a PowerShell script is a no-brainer.

#!/bin/bash

o365 spo connect https://n8dtest-admin.sharepoint.com

echo Add Collaboration Theme: n8d-blue.json
o365 spo theme set -n "N8D - Collaboration" -p n8d-blue.json

echo Add Project Theme: n8d-green.json
o365 spo theme set -n "N8D - Projects" -p n8d-green.json

echo Add Project Theme: n8d-red.json
o365 spo theme set -n "N8D - Communication" -p n8d-red.json

You can even give themes a more beneficial name for your end users, like the purpose of the existence of this theme. Like with PowerShell I first need to connect to the tenant first. The Office 365 CLI uses the Device Authentication method that requires to open and authenticate using my browser.

Device login on Office 365

Once successfully authenticated against Office 365 the deployment starts and the theme gets added to the in the defined order to the tenant.

Bash Script Deployment output

After this step has finished successfully open SharePoint, navigate to a modern site collection and choose one of your previously deployed themes via the “Change Look” dialogue.

Company Themes by purpose instead of colours

 

Instead of naming the themes by the primary colour, which is no use at all for the end user you see the defined purpose next to it.

The ability to deploy themes is excellent but giving them a full meaning name might help your user find the best suitable option for their site.

To summarise

If you are like Microsoft, then it is natural to give their theme colour names. The only want to provide some possible out of the box options to show the general capability.

If you have the plan to use your company themes or even as I showed here maybe use multiple colour options, please make sure to name them correctly and not only by the primary colour.

Even “Company Primary Theme” or “Company Theme” and replace the company with your companies name. This way it makes more sense for your user than use the Pantone name, such as Flamingo Pink, of the primary colour in your theme.

Finally, even if you use PowerShell, you can copy the lines related to the Office 365 CLI and use it from there.

To find more information on the Office 365 CLI check out the documentation.

If you have some ideas or issues please check out the https://github.com/SharePoint/office365-cli/Github Repository

Leave a Reply

Required fields are marked *.


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