> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cocoondata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming SafeShare's web-based interfaces

Themes allow the color schemes and logos utilised throughout [SafeShare for Web](/3.5/user.md) user interface to be customised for individual [organisations](/3.5/user.md#organisations), where each individual organisation is associated with its own theme. (For more information about adding/configuring organisations through [SafeShare Administration](/3.5/admin-platform.md#platform-administration), see [Administering organisations](/3.5/admin-platform/administering-organisations.md).)

In this version of SafeShare and the Covata Platform, themes are generated using an separate tool (the [Covata/WebApp Theme Builder](https://www.npmjs.com/package/covata-theme-builder)), which is developed by Covata and is available as a locally executable [npm package](https://www.npmjs.com/).

These color scheme and logo customisations are also utilised throughout:

* the [Organisation Administration](/3.5/admin-platform/organisation-administration.md) interface,
* the [SafeShare Administration](/3.5/admin-platform.md#platform-administration) interface, as well as
* email notifications sent out by the Covata Platform.

Newly installed instances of SafeShare are pre-packaged with the *Covata default theme*. This theme is initially used for all organisations' SafeShare for Web and Organisation Administration interfaces, email notifications, as well as the SafeShare Administration interface.

Using the WebApp Theme Builder tool, you can generate different themes - one for each organisation - as well as your own default theme (aka the 'system' theme), which is used for:

* any organisation that does not have a theme defined for it,
* the SafeShare Administration interface and
* the [My Account](/3.5/user/managing-your-account.md) feature.

Visit the [covata-theme-builder page](https://www.npmjs.com/package/covata-theme-builder) (on the npm web site) for more information about obtaining and using the WebApp Theme Builder tool, as well as deploying themes to a Covata Platform instance.

> [!NOTE]
>
> Other customisable aspects of SafeShare, such as the Application Name, as well as the Company Name and Copyright Notice that appear in email notifications, are configurable through the [System details properties](/3.5/admin-platform/configuring-platform-administration-properties.md#system-details-properties) section of the **Configuration** [page](/3.5/admin-platform/configuring-platform-administration-properties.md) of SafeShare Administration. However, the Company Name can be customised for each organisation (through the **Configuration** [page](/3.5/admin-platform/configuring-organisation-administration-properties.md) of Organisation Administration).

## Themable areas of SafeShare for Web&#x20;

The following diagrams indicate the *themable components* of SafeShare for Web's user interface that can be customised using the WebApp Theme Builder tool. These themeable components include images/logos and other properties whose values determine color-usage, each of which is indicated below by its property name in the `theme.properties` file.

**The main SafeShare page**

![Themable areas of the main application page](https://mintcdn.com/cocoondata/_MzKWwAlmVvZNHNz/images/e296693d588b-themable-areas-of-the-main-application-page.jpg?fit=max\&auto=format\&n=_MzKWwAlmVvZNHNz\&q=85\&s=fe7390860046923149f1e606b7bb63ec)

> [!NOTE]
>
> The `primary-color` is also used for 'waiting' / 'processing' animations, which appear for example when a file's view is being downloaded.

**Dialog boxes**

![Themable areas of a dialog box](https://mintcdn.com/cocoondata/he5RKKcj9W7Dcv1n/images/4eefe9b0ba67-themable-areas-of-a-dialog-box.jpg?fit=max\&auto=format\&n=he5RKKcj9W7Dcv1n\&q=85\&s=c36aac2880f1c287b05dc2d74f7555b0)

## Themable web-based administration areas

The following diagrams indicate the *themable components* of SafeShare's web-based administration pages that can be customised using the WebApp Theme Builder tool. These themeable components include images/logos and other properties whose values determine color-usage, each of which is indicated below by its property name in the `theme.properties` file.

**The Organisation Administration interface**

For a given organisation, any of its organisation-specific components of the main SafeShare page ([illustrated above](/3.5/admin-platform/theming-the-applications-web-based-interfaces.md#themable-areas-of-the-web-application)) that have a specific property value, also affects the equivalent component in this organisation's Organisation Administration interface. The following diagram shows additional components, which do not have an equivalent in the main SafeShare page/interface, but are also customised using the WebApp Theme Builder tool.

![Themable areas of the Organisation Administration interface](https://mintcdn.com/cocoondata/XFCH1-fsOPTworsw/images/a9ad974274b4-themable-areas-of-the-org-admin-interface.jpg?fit=max\&auto=format\&n=XFCH1-fsOPTworsw\&q=85\&s=bd36ba2fc43b563134f7ef8a063d18c4)

## Other themable SafeShare areas&#x20;

The following diagrams indicate the *themable components* of other areas and aspects of SafeShare (i.e. not covered above) that can be customised using the WebApp Theme Builder tool. These themeable components include images/logos and other properties whose values determine color-usage, each of which is indicated below by its property name in the `theme.properties` file.

> [!NOTE]
>
> Only the logos/images and property values (of the `theme.properties` file) located inside the system theme's directory are used for the following areas.

**The sign-in page**

![Themable areas of the sign-in page](https://mintcdn.com/cocoondata/MnwEzgXdF2yy5sI6/images/22f1a50ca1ed-themable-areas-of-the-sign-in-page.jpg?fit=max\&auto=format\&n=MnwEzgXdF2yy5sI6\&q=85\&s=651d267dfa78cc2fd87531e8f09a5c8e)

**Email notifications**

![Themable areas of an email notification](https://mintcdn.com/cocoondata/he5RKKcj9W7Dcv1n/images/47f395496715-themable-areas-of-an-email-notification.jpg?fit=max\&auto=format\&n=he5RKKcj9W7Dcv1n\&q=85\&s=96af0e1503d7d1acd03a91345f5e8685)

> [!NOTE]
>
> Email notifications are themed according to the SafeShare 'area' to which the notification's content is related. \\
>
> For example, email notifications about activities conducted through:
>
> * SafeShare Administration, such as the addition of a SafeShare administrator user account, use the system theme.
> * Organisation Administration, such as the removal of a Covata user account from an organisation, use the organisation's theme. <sup>\*</sup>
> * Activities conducted through any SafeShare application, such as sharing an item with another person, use the theme of the recipient's home/default organisation. <sup>\*</sup> This principle also applies to a person who is not yet registered on the Covata Platform (i.e. this person's account is created and added to an organisation as a result of them being shared an item by an existing Covata user in that organisation).
>
> <sup>\*</sup> If an organisation's theme were not defined, then such notifications would instead use the system theme.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.