# Changing the Theme

To keep on adjusting the style of the app, we’ll change the styling of some Variables and Variants so that they better match our new logo.

<details>

<summary>What is a Variable?</summary>

**Variables**

A Variable is a set of general styling properties for **Colors**, **Sizes**, **Fonts** and **Times**, similar to custom properties in CSS. These properties provide specific settings to specific elements. We can define different "contexts" (values for a Variable) for each Variable, that way, we can use the same color, size, font or timeframe several times, without needing to configure said elements each time.

Every Web Control and Variant has associated Variables for their colors and sizes, or fonts and times when applicable. For instance, within a single application, you might want to use the same colors across buttons, fonts or borders to maintain branding uniformity. Changes done in a Variable Color, will change subsequent elements that are using that color context. This will also apply for other Variables like sizes. If you want to keep a Web Control, such as a button, the same size throughout your application, you can use Variables to keep that button size consistent.

</details>

<details>

<summary>What is a Variant?</summary>

**Variants**

A Variant is a set of styling properties for a specific [Web Control](../../web-controls/button-web-control), similar to a class in CSS. If you're not familiar with CSS classes, you might compare Web Controls and Variants to dinnerware. Plates, cups, and forks are all like different web controls: they each have a particular function, and this is reflected in aspects of their appearance. However, not all plates look the same. A square red plate and a round blue plate are both capable of serving as plates and are simply styled differently. If you are deciding whether to set your table with your blue plates or your red plates, this is like choosing between different Variants of plates.

Every Web Control has associated Variants: cosmetic variations that appear differently but function identically. Variants can be edited in [Theme Builder](../../../studio/studio/builder-bar/theme-builder#theme) and then used as defaults when adding new Web Controls. For instance, within a single application, you might create two Variants of button: a rectangular one in red, and a round one in blue. Any changes made to existing Variants also apply retroactively: existing Web Controls previously styled according to the old default will immediately take the form specified by the new default. This allows for consistent branding throughout the entirety of each user's Journey, and it also makes it easy to see how different combinations of colors, fonts, and graphics look together.

</details>

## Changing the Default Color Palette

We will change the colors of our Web Page to better match the color of our example logo. These are the Hex codes for the colors we are going to use:

* Orange: E36127
* Blue: 007A78

1. Go to **Theme** Builder.
2. Under the **Variables** section, click on **Colors**
3. Click on **brandPrimary**
4.  Change the default HEX color to E36127. You can edit the value for the HEX color code by using the field below the color panel to the right.

    ![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e20463273fa9c621a41ef5340065fee84c7ebf02%2Fchanging-the-theme-v184-0.png?alt=media)
5. Click on **textPrimary** and change the default HEX color to 007A78.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e38a8a05578d08994a261c153472d7a16c52e412%2Fchanging-the-theme-v184-1.png?alt=media)

Additionally, change some of tints and secondary colors so that they all look good in combination:

**brandPrimary** #E36127\
**brandPrimaryTint1** #ECA673\
**brandPrimaryTint2** #F8E0BB\
**brandPrimaryTint3** RGBA (237, 188, 136, 0.1)\
**brandError** #E31212\
**textPrimary** #007A78\
**textSecondary** #51B5B3\
**borderPrimary** #676464\
**borderSecondary** RGBA (0, 0, 0, 0.2)\
**backgroundPrimary** #FFFFFF\
**backgroundSecondary** #F4F4F4

Some colors only support RGBA color codes. You can alternate between the different color codes available for each color Variable by clicking on the up and down arrows next to the color code name.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-8cecdfab5cf8795677ba978feb9b0f8d1f95276d%2Fchanging-the-theme-v184-2.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

Alternatively, you can also use the slide bars to select a color. The slide bars allow you to choose the primary color and its transparency, and the color panel allow you to change between different alternatives of that selected color. The circle to the left of the bars is a preview of the current selected color.

\[block:image] { "images": \[ { "image": \[ "./assets/changing-the-theme-v184-3.GIF", null, "" ], "align": "center", "sizing": "300px" } ] } \[/block]

## Modifying a Variant

When using a Web Control, the Variant used in that control will be a default one. To see what Variant is being used in a selected Control, go to the Inspector to the right, and select the **Style** tab, under the **Variant**, you will see what Variant is selected. When a Web Control is created, it will have the `default` Variant.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-aa1aaf9bc00e824ab45fcc2bbba03f023ff245e1%2Fchanging-the-theme-v184-4.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

If you make any styling modifications to a Control, the Variant name will have an asterisk symbol (**\***) to let you know that the selected Variant was modified. This will also happen for the name of the sections you modify in the **Style** tab.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-12118e857123aa94be0b94e6830dc0b027a99cd3%2Fchanging-the-theme-v184-5.png?alt=media)

### Creating and modifying a Variant

You can make different changes to a Variant on the Inspector. To do this, go to the Inspector to the right and click on the **Style** tab. Here, you can modify a selected Variant directly in the **Theme Builder** using the **Edit in Theme Builder** option. Alternatively, you can also make styling modifications to a Control and use those changes to create a new variant using the **Create Theme Variant** option or update an existing one using the **Update Theme Variant** option. You can also revert all your styling changes using the **Reset All Overrides** option.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-28c8524a0859efda7bfb3f8f3d79b4b8ebda0b52%2Fchanging-the-theme-v184-6.png?alt=media)

Let's modify the current default Variant:

1. On **Web Flows**, go to **Terms and conditions accept** > **Info form page** > **Section container** > **Action container** > **Continue button**
2. On the Inspector, click on the **Style** tab. On **Variant**, make sure **default** is selected.
3. Click **Layout** > **Spacing** and change the bottom and top padding to `15px` for a larger margin.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-19b7be1b1422ce9d947755966bfad8d0f112fd74%2Fchanging-the-theme-v184-7.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

4. On **Border**, change the border **Style** to **double**, select the **brandPrimaryTint1** and choose `4px` to make it look wider:

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-0d72adaa6e3a11ff1e11823a8b8aaa652e70c87f%2Fchanging-the-theme-v184-8.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

We will modify the state of our current Variant for when the button is pressed, by changing the color of the default Variant, when pressed, to a lighter color.

1. On **Variant**, select **Variant State** `Pressed`
2. On **Background**, select the **brandPrimaryTint2**.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-a51fc288a347819c059039c32056d7cf503653a3%2Fchanging-the-theme-v184-9.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

3. We will save our changes. On **Variant**, click the three dot option button and select **Update Theme Variant**. This will overwrite the default settings for that Variant and replace them with the current ones.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-dd37ccb8e4d5b5e6d56bd00c00fb1b6baf72a203%2Fchanging-the-theme-v184-10.png?alt=media)

We will now create a new Variant, to have two style options for our buttons. We will use the other branding color of our example logo.

1. Make sure both **default** for **Variant** and **default** for **Variant State** options are selected, then click on **Create Theme Variant**
2. Give a name to this new Variant, for this exercise, we will name it **defaultAlternative**. Click on **Create**

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-6228ca2af2a9aa1a8691a9118c2548ee0879f52c%2Fchanging-the-theme-v184-11.png?alt=media)

3. On **Background**, select the **textPrimary** color and on **Border**, select **textSecondary** as color. By doing this, you will have two styles to choose from when editing buttons and their colors.

\[block:image] { "images": \[ { "image": \[ "./assets/changing-the-theme-v184-12.GIF", null, "" ], "align": "center", "sizing": "400px" } ] } \[/block]

3. Save your changes using the **Update Theme Variant** option, again.
4. Save the app and go to **App Preview** to see the changes reflected:

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-295312621fa0816ee3a1b5fbd0149967d2632630%2Fchanging-the-theme-v184-13.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

<details>

<summary>What other styling changes can be made to individual Variants?</summary>

**Styling Variants**

The same styling properties that apply to individual Web Controls, apply to their Variants. Their height, shape, and color are some common customizable properties, although specific details depend on the particular elements of the Web Control. For a deeper dive into the available customizations, see [Common Styling Properties of Web Controls](../../styling/styling-overview/web-control-styling-properties).

</details>
