# Themes using UI

## **Themes**

Themes are used to change visual display of Policy blocks in the Policy Configurator.&#x20;

Blocks display style is determined by their matching of the criteria defined in the theme.

### **1. Theme management**

Policy Configurator contains a section, it can be navigated to by clicking the corresponding button named **Settings** in the top panel.

<figure><img src="https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FKZ41L3nXEt8sUyFnYlki%2F0.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2Fg63dEQrbc8PCJijd2PJZ%2F1.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note**: *users must click ‘**Save**’ button to preserve the changes to the theme after edits as shown below:*
{% endhint %}

<figure><img src="https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FShlOZZ5ZZF6JeniLBUAG%2F2.png?alt=media" alt=""><figcaption></figcaption></figure>

#### **1.1 Menu actions**

![image4.png](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FtV9Dh6y9Z4lJ2JmQgoKc%2F3.png?alt=media)

* Create new theme
* Copy selected theme
* Change naming of the selected theme
* Import new theme
* Export new theme
* Delete selected theme

#### **1.2 Rules**

Each theme contains a set of **rules** which feature matching conditions and linked styles. The matching and styling algorithm is as follows:

* For each block, rules are checked in the order of their definition.
* If/when Policy element (block) satisfies the condition in the rule, the style from the rule definition is applied to the element.
* If/when the block satisfied more than one rule all styles are ‘merged’ and applied to the block resulting in the multi-colored blocks.
* If/when the block does not match any of the rules’ criteria then the default style is applied to the block. Default style always exist in every theme.

**1.2.1 Adding new rules**

New rules can be added by clicking on **Create Rule** button.

<figure><img src="https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FJo9oJWMVNvrLemzCzl8B%2F5.png?alt=media" alt=""><figcaption></figcaption></figure>

**1.2.2 Removing rules**

Rules can be removed by clicking on remove icon as shown below:

<figure><img src="https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FbOaucIaQqFuTf3s9uNMk%2F6.png?alt=media" alt=""><figcaption></figcaption></figure>

**1.2.3 Default rule**

This rule is applied if and only if no other rules’ conditions matched the block.

![](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FdSkID0s1OBRxVZnuBVXz%2F7.png?alt=media)

**1.2.4 Conditions**

<figure><img src="https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FfTHVnwKQXjDb8BWSuBem%2F8.png?alt=media" alt=""><figcaption></figcaption></figure>

Multiple types of conditions can be used in rule definitions

* Types – allows matching based on the type of the block

![](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FYRX14JvtFugXqtQAhWRt%2F9.png?alt=media)

* Roles – allows matching based on block permissions, i.e. based on the roles to whom the blocks are accessible

<figure><img src="https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FDk5FengunaQ1eJUBkehs%2F10.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:**

*roles are dynamic variables in policies (i.e. policies can define arbitrary number of custom roles). However theme rule definitions are generic (applicable to all policies). Therefore the order of appearance of roles in the policy are used as a role IDs for theme rule definitions. ‘Owner’ role exists in all policies thus it is referred to by name in the theme rule definitions.*
{% endhint %}

* API – allows matching based on the API-level access to the block

![](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FSacfMHZE9Zoo6kJru6tX%2F11.png?alt=media)

* GET & POST – block can be access with GET and POST HTTP requests
* Only GET – block can only be accessed via GET API method
* Not Accessible – block is not accessible via API

**1.2.5 Styles**

Style definitions in rules defined text color and text background color, line (shape) color, form and thickness.

![](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FYfcpBdd8560BuqkVxMB2%2F12.png?alt=media)

{% hint style="info" %}
**Note:**

*In the case when multiple theme rules are applied to the block (when multiple rule criteria matched the block) only the background color is ‘merged’ resulting in the multi-colored (stripy) block appearance. For all other style parameters the definitions from the first matching rule are used.*
{% endhint %}

![](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FmvBmyGL88GDepKkHxh9D%2F13.png?alt=media)

**1.2.6 Description**

Description – is a textual description of the rule. It is displayed next to the explainer drop down in the Policy Configurator.

![](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2Fuk6FxjNRaWimac7ppsNo%2F15.png?alt=media)

### **2.Using themes**

#### **2.1 Selecting themes**

Themes can be selected from the drop down button as shown below:

<figure><img src="https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2F69rmCAM5gC9f5GHldg2F%2F16.png?alt=media" alt=""><figcaption></figcaption></figure>

#### **2.2 Explainer drop-down**

We are able to see all the defined settings in policy configurator screen.

![](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2FTpOgtODueb98tu4DjHLA%2F17.png?alt=media)

Explainer drop-down button is highlighted as shown below:

![](https://3006114282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXVOaWpJKxLZf1Tee9eCO%2Fuploads%2F3mR2v3QKJmh8IDSoiHEp%2F18.png?alt=media)
