The Theme module of Jint Portal sets the visual identity of Jint on your SharePoint sites: the colours and appearance of the Unified Experience side bar, of the footer and of the new Jint web parts. You create your themes in a library, then choose which sites each one applies to.

This article describes the three tabs of the module, the screen used to create and edit a theme, and the best practices for rolling out a theme without surprises.

📋 Contents

• Overview of the Theme module
• Library tab
• Create or edit a theme
• Assignment tab
• Legacy tab
• Best practices

1. Overview of the Theme module

A theme brings together all of Jint's visual settings on SharePoint: a colour palette, the appearance of the side bar, the appearance of the footer and the style of Jint web parts. You can create several themes, for example one per brand or subsidiary, and apply each one to the whole tenant or to specific sites.

In the left-hand menu of Jint Portal, under Products, expand SharePoint and click Theme. The module has three tabs:

• Library: the list of your themes, where you create, edit, duplicate and delete them;
• Assignment: the choice of the theme applied to the whole tenant, and of the themes specific to some sites;
• Legacy: the colours set in the former Configurator, kept for compatibility.

💡 The Theme module is displayed when the Unified Experience is enabled on your tenant.

2. Library tab

The library shows one card per theme. Each card shows the colours of the theme's palette, its name and its creation and modification dates, along with three actions: Edit, Duplicate and Delete.

The Default theme

The first time the module is opened, Jint creates a theme named Default and applies it to the whole tenant. You can edit it like any other theme, or apply another theme to the tenant from the Assignment tab.

Create a theme

Click Create a theme, at the top right. A theme named New theme is created, then the editing screen opens. If that name is already taken, a number is added to it ("New theme 2", "New theme 3"…). A new theme is not applied to any site until you assign it.

⚠ The theme is created as soon as you click Create a theme. If you leave the editing screen without saving, it stays in the library with its default values. Delete it if you do not need it.

Edit a theme

Click Edit on the theme's card to open the editing screen. See section 3.

Duplicate a theme

Click the Duplicate icon on the card. The copy takes the palette and all the settings of the original theme, and is named after it followed by "(copy)". It is not applied to any site: the assignments of the original theme are not copied.

Delete a theme

Click the Delete icon on the card, then Confirm in the Delete this theme? window.

⚠ A theme still assigned to the tenant or to a site cannot be deleted. First assign another theme to those sites in the Assignment tab, then delete it.

3. Create or edit a theme

The editing screen opens when you create a theme or click Edit.

• At the top, the Theme name field (required) and the Cancel and Save buttons. Two themes cannot have the same name.
• On the left, a live preview of the side bar, the web parts and the footer. It updates with every setting.
• On the right, the Settings panel, organised in four tabs: Colors, Hub, Footer and Web parts. On a narrower screen, the panel opens with the Settings button.

Cancel restores the theme's values as they were when the screen opened, without leaving it. Save saves the theme and takes you back to the library.

💡 There is no publishing step: as soon as you save, the theme applies to every site it is assigned to. Changes can take up to 5 minutes to appear on your SharePoint pages.

Pick a colour

Click the swatch of a colour setting to open the picker. It has two tabs:

• Palette: the colours of the theme's palette, under Style colours (Color 1, Color 2…), then the fixed shades under Greys (Black, Grey 80%, Grey 60%, Grey 40%, Grey 20% and White). Click a colour to apply it; the icon to the right of its code copies it.
• Custom: a free colour area, with Hue, Opacity, the hex code and an eyedropper to pick a colour from the screen.

💡 A colour picked from the palette stays linked to the palette: if you change Color 1, every setting that uses it changes too. This is the simplest way to update a theme in a single change.

3.1 Colors tab

Palette

The palette holds the colours of your theme, for example those of your brand guidelines. They are offered in every colour picker of the theme, alongside the greys.

• Add a colour adds a row to the palette. Enter the hex code or pick the colour in the colour area.
• The delete icon removes a colour from the palette.
• The handle at the side of each row lets you reorder the colours by drag and drop.
• The Greys block lists the greys that are always available in the picker. They cannot be edited.

⚠ Palette colours are identified by their position. Removing or moving a colour shifts the colours after it: a setting that used Color 3 takes the colour that ends up in third position. Check the preview after each removal or move.

Preview

These settings stand in for your SharePoint site to make the preview more faithful. They are not saved with the theme and change nothing on your sites.

3.2 Hub tab

The Hub tab sets the appearance of the Unified Experience side bar. It is the tab that opens first.

Layout

Colors

In Gradient mode, two pickers appear, Colour 1 and Colour 2, for the start and the end of the gradient.

📌 To discover the buttons of the side bar, see the article New Unified Experience - Feature overview.

3.3 Footer tab

The Footer tab sets the appearance of the Jint footer. Its content (blocks and links) is configured in SharePoint > Footer.

3.4 Web parts tab

The Web parts tab sets the default style of Jint web parts on the sites where the theme applies: their title, their frame and the items they display.

💡 These settings apply only to the new generation of Jint web parts, identified by their yellow icon, such as Jint - Focus. A setting changed in a web part's configuration panel always takes precedence over the theme, for that web part only.

Web part title

The style of the title displayed at the top of web parts.

Picking a heading level applies its size: H1 32 px, H2 28 px, H3 24 px, H4 20 px, Body 18 px. You can then freely adjust the size with the slider.

Web part

The frame around each web part. Each setting is turned on with its switch.

Content

The items displayed inside a web part, for example the cards of a news list.

4. Assignment tab

The Assignment tab sets which theme applies on which site.

Theme applied to the whole tenant

Select in the list the theme applied by default on all your sites. The change is saved as soon as you pick a theme, with no button to click.

Theme per site

The theme picked for a site replaces the tenant theme on that site only.

1. Click Add a site.
2. Enter the full address of the site in the Site URL field, then click the ✓ icon to confirm (the ✕ icon discards the entry).
3. The site is added with the tenant theme. Pick its theme in the Site theme column: the change is saved immediately.

💡 A site already in the table cannot be added a second time: change its theme on its row instead.

📎 Example URL: https://your-tenant.sharepoint.com/sites/communication

To send a site back to the tenant theme, click the delete icon at the end of its row, then Delete in the confirmation window.

⚠ A site theme applies only to the site whose address you entered. Its subsites keep the tenant theme: add each of them to the table if you want them to use the same theme.

5. Legacy tab

The Legacy tab holds the colours the Unified Experience used before themes, as they were set in the former Configurator: main colour, menu radius, panel, alert, notification and footer colours, display of the logo on Modern SharePoint sites and hiding of the left bar.

These settings are kept for compatibility. They act as a base: the theme assigned to a site is laid over them and wins for everything it sets. For any new visual setting, use a theme rather than this tab.

6. Best practices

Build the palette from your brand guidelines

First enter the colours of your brand guidelines in the palette, then pick them in each setting. The theme stays consistent, and a brand update only means editing the palette.

Test on one site before the tenant

First assign a new theme to a test site in the Assignment tab, check the result, then apply it to the whole tenant.

Duplicate before a major change

To rework a theme already in use, duplicate it, edit the copy and test it on a site. The original theme stays untouched until you switch the assignment.

Give pages 5 minutes

After saving or assigning a theme, wait up to 5 minutes before checking the result on your SharePoint pages.

Avoid removing a palette colour already in use

Prefer changing the colour to removing it: removal shifts the following colours and changes the appearance of the settings that use them.