Managing Atlas Themes

Atlas uses Modern SharePoint sites which have a number of theming options available. The theme covers just the main colours to be used for the interface, including:

• Text
• Controls e.g. buttons (both M365 and Atlas)
• In Atlas 3.0 and earlier, the Atlas Menu background. In Atlas 3.1 onwards this can be controlled separately from the theme by updating the banner.png in the Atlas Assets library in the Atlas Configuration workspace.
  
  

In this article:

• Creating a new theme
• Adding the theme to Atlas
• Recommendations
  
  

Creating a new theme

To create a new theme, start by opening the Fluent UI Theme Designer. This is a tool provided by Microsoft to allow you to generate a theme while previewing how it will look and informing you of any Accessibility issues with your chosen colours.

Starting in the top left of the Theme Designer page you should pick your initial Primary (1), Text (2) and Background (3) colours. You can type in the hex code for the colours you need, or click the colour block to get a visual colour picker:

In most cases we highly recommend not changing the Text or Background colours because reading black text on a white page is likely to be the most comfortable for users.

Exporting the theme

Once you have created your theme above, click Export Theme in the top right:

A panel will load on the right hand side, and you must choose the JSON tab:

Now click into the code box and select all the text inside (Ctrl+A) then copy it (Ctrl+C). This is the code you need to crete your theme inside Atlas.

Adding the theme to Atlas

To add a new theme to Atlas, or to update the existing default them, you will need the SharePoint Administrator role in M365 and permissions to manage the Atlas Configuration site (usually located at /sites/atlasconfiguration). You will also need to be an Owner or Administrator of any existing workspaces where you want to apply the new theme.

Go to the Atlas Configuration site, and from the left hand menu click Theme Manager. Choose the action you wish to perform, then provide the requested details:

 

You need to know whether you are updating the default Atlas theme or simply adding alternative theme options that can be selected for existing workspaces if desired. If you update the default Atlas theme any new workspaces created from ConneX from that point onwards will use the updated theme.

Update your Atlas theme

To update the default theme, select Update a theme then select "Atlas Theme" in the dropdown. Paste your JSON code into the box below, then click Update Theme at the bottom:

Create a new additional theme option

To create a new theme option that can be picked for workspaces after they are created, select Create a theme then type the name you want for your theme, paste the JSON into the box below and finally click Create Theme:

You will get a popup message telling you whether the action was successful.

Change the theme for an existing Atlas workspace

To change theme for an existing workspace you will need to be an Owner of the workspace. As an Owner you can navigate to the workspace, then open the Settings menu in the M365 bar and choose Change the Look. If you don't see this option you don't have the correct permissions on the workspace:

The "Change the look" panel will then open on the right of the page. Click Theme:

 

Under the Company themes section you will see your default Atlas Theme plus any additional themes you created earlier:

Choose the theme you want to change to, then at the bottom of the panel click Save to apply the change to the current workspace:

Recommendations

In most situations it is best to have one theme that is used across all Atlas workspaces. There are a number of reasons for this, but mainly it is to ensure that users are not confused when moving between workspaces if the colours keep changing. This is especially important because users will often move between workspaces without necessarily knowing it, when they click on Knowledge or News items for example, and having the colours change between workspaces just makes the experience feel inconsistent.

Additionally, because repeated elements of pages, such as the Global Navigation, are cached in the user's browser, you may find that when moving between workspaces the interface buttons, text etc. change colour but the menu may not change if it is being loaded from the cache. 

As a result when creating a new theme, we recommend making it the new default theme and then applying it to all existing workspaces at that time. New workspaces will always take the current default theme. To see how to apply the default theme to a workspace where you are an Owner, click here: Applying the Default Theme to your site