> ## 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 Safe Share's web-based interfaces

Themes allow the color schemes and logos utilized throughout the [Safe Share web application](/3.2/user.md) user interface to be customized for individual [organizations](/3.2/user.md#organisations), where each individual organization is associated with its own theme. (For more information about adding/configuring organizations through [Safe Share Administration](/3.2/admin-platform.md#platform-administration), see [Administering organizations](/3.2/admin-platform/administering-organisations.md) in the [Safe Share Administrator's Guide](/3.2/admin-platform.md).)

In this version of Safe Share 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 customizations are also utilized throughout:

* the [Organization Administration](/3.2/admin-org.md#organisation-administration) interface,
* the [Safe Share Administration](/3.2/admin-platform.md#platform-administration) interface, as well as
* email notifications sent out by the Covata Platform.

Newly installed instances of Safe Share are pre-packaged with the *Covata default theme*. This theme is initially used for all organizations' Safe Share web application and Organization Administration interfaces, email notifications, as well as the Safe Share Administration interface.

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

* any organization that does not have a theme defined for it,
* the Safe Share Administration interface,
* the [My Account](/3.2/user/managing-your-account.md) feature and
* all email notifications.

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 customizable aspects of Safe Share, 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.2/admin-platform/configuring-platform-administration-properties.md#system-details-properties) section of the **Configuration** [page](/3.2/admin-platform/configuring-platform-administration-properties.md) of [Safe Share Administration](/3.2/admin-platform.md).

## Themable areas of the Safe Share web application&#x20;

The following diagrams indicate the *themable components* of the Safe Share web application's user interface that can be customized 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 Safe Share page**

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

> [!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/_MzKWwAlmVvZNHNz/images/d358a2274572-themable-areas-of-a-dialog-box.jpg?fit=max\&auto=format\&n=_MzKWwAlmVvZNHNz\&q=85\&s=886298f392a79b24c02f24ab3c0ce046)

## Themable web-based administration areas

The following diagrams indicate the *themable components* of Safe Share's web-based administration pages that can be customized 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 Organization Administration interface**

For a given organization, any of its organization-specific components of the main Safe Share page ([illustrated above](/3.2/admin-org/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 organization's Organization Administration interface. The following diagram shows additional components, which do not have an equivalent in the main Safe Share page/interface, but are also customized using the WebApp Theme Builder tool.

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

## Other themable Safe Share areas&#x20;

The following diagrams indicate the *themable components* of other areas and aspects of Safe Share (i.e. not covered above) that can be customized 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/PII5vWTBhNvVAbCi/images/ec25458b1725-themable-areas-of-an-email-notification.jpg?fit=max\&auto=format\&n=PII5vWTBhNvVAbCi\&q=85\&s=5659f78cbe76f189ae1c69c4ee513db9)

> [!NOTE]
>
> It is currently not possible to theme email notifications on an organization-specific basis.


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