Set custom logo and colors

In this tutorial, you will learn how to set your company logo, website icon (favicon), and change the default color of Adaxes web interface.

Open Adaxes web interface configurator.
How
- On the computer where web interface configurator is installed, open Windows Start menu.
- Click Adaxes Web Interface Configurator.
To configure the web interface, you need to have the appropriate permissions.
Permissions
The permissions to configure the web interface are delegated via security roles. By default, only service administrators have the appropriate permissions. To enable other users to configure the web interface, grant them the corresponding permissions.

To create a security role that grants the permissions to configure web interface:
- In Adaxes administration console, right-click your Adaxes service, point to New and click Security Role.
- Enter a name for the new security role and click Next.
- On the Permissions step, click the down arrow embedded into the Add button and click Configure Web Interface.
- Click Next and follow the steps in the wizard.
In the top left corner, select the web interface you want to customize.
In the left navigation menu, click Logo and colors.

Logo

Click Set in the Logo section to set the logo. It is recommended to use an SVG logo because it will scale well on any resolution.

Theme-dependent colors in SVG logo

You can make Adaxes adjust the colors of your logo elements, depending on the active web interface theme.

There are several predefined styles that look good on both themes. To use them in your logo, add the corresponding CSS class to a logo element.
SVG example {.mb-9}
```
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 70 30">
    <path class="u-icon-color-red"
          d="M35,2.7c6.78,0,12.3,5.52,12.3,12.3S41.78,27.3,35,27.3S22.7,21.78,22.7,15S28.22,2.7,
          35,2.7 M35,1c-7.73,0-14,6.27-14,14s6.27,14,14,14s14-6.27,14-14S42.74,1,35,1L35,1z"/>
</svg>
```
The following two classes are special. Their light and dark theme variants are not static but rather based on the web interface accent color you selected.
- u-icon-color-accent-1
- u-icon-color-accent-2
Custom theme-dependent colors

If the colors used in your logo are not represented by any of the predefined styles, you can create custom classes. This also enables you to use any combination of colors for light/dark themes, not just a variant of the same color.

To do this, apply a custom class (e.g. my-class) to a logo element. Then, define the class style for each theme using the corresponding CSS selectors – .my-class for the light theme and .dark-theme .my-class for the dark theme.
SVG example {.mb-9}
```
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 70 30">
    <style type="text/css">
        .my-class { fill: green }
        .dark-theme .my-class { fill: deepskyblue }
    </style>
    <path class="my-class"
          d="M35,2.7c6.78,0,12.3,5.52,12.3,12.3S41.78,27.3,35,27.3S22.7,21.78,22.7,15S28.22,2.7,
          35,2.7 M35,1c-7.73,0-14,6.27-14,14s6.27,14,14,14s14-6.27,14-14S42.74,1,35,1L35,1z"/>
    <circle class="my-class" cx="10" cy="10" r="10" />
</svg>
```
Favicon

Click Change in the Favicon section to change the icon.

The icon file should be in the .ico format. It is recommended to include 16x16, 32x32, 48x48, and 256x256 image sizes in the icon file to cover all the default usage scenarios.

Screenshot

Color

Change the color of the web interface elements in the Accent color section.
Save the changes.

Section settings can be applied to other web interface configurations. Click the down arrow button in the top right corner of the section and then click Apply to other web interfaces.

View screenshot

Set custom logo and colors

Logo

Theme-dependent colors in SVG logo

Custom theme-dependent colors

Favicon

Color