# Theme

{% embed url="<https://youtu.be/VDbbMmA-KFI>" %}

Every app deserves a great design. To set the overall design settings in your app, AppMachine has created the **Theme** block. It is the green block next to the blue **Home** in your block list:

&#x20;![](https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FdQIQPynZYF2qxUjQWz0E%2FScreenshot%202022-10-26%20at%2015.18.54.png?alt=media\&token=88d2e4b2-e285-4bb8-8f3a-1f26308e4b61)

Clicking on the **Theme** block opens a unique screen in the previewer section that allows you to quickly see the impact of any changes you make to these design settings. There are two sections available in the right side menu;&#x20;

* **Settings** for basic design settings that allow for quick control of common design features in the app&#x20;
* **Advanced** settings that grant more granular control of specific design features of the app. &#x20;

The **Theme** block largely determines the look and feel of the app. The menu on the right side of your screen opens to **Settings** as a default. AppMachine encourages that you play with these settings so that you can see these changes immediately in the responsive previewer.&#x20;

<figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FW52zhLLoYltsheGxE2wP%2FTheme1_gif.gif?alt=media&#x26;token=749984d2-c0cc-4bbb-9b9c-8cc4493f9d22" alt=""><figcaption></figcaption></figure>

We've named the block Theme because the design choices you make in the Theme block will be visible in and largely determine the options available to you when designing subsequent blocks. The Elements editor will draw from your Theme block when you start building your custom screens, as well.

### **Settings**

#### **Base Shape**

The base shape determines the rounding of the button and text field shapes.&#x20;

#### **Fonts**

You can define the fonts for the heading and body sections of text in your app.&#x20;

#### **Colors**

AppMachine offers an algorithm that automatically chooses complementary colors based on the main color that you select. These colors can be determined in the **Color Theme** section. \
\
By clicking on the **Primary** button, you can select your desired color.&#x20;

To add a secondary color, click on **Add a color**.&#x20;

You can also add custom colors to the palette of colors in your app.&#x20;

&#x20; ![](https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FnvlxSNTZpeV46YKN5YmI%2FScreenshot%202022-10-26%20at%2016.16.13.png?alt=media\&token=079ea01c-5f10-43e3-adfe-7deeb26e0441)

### Advanced

#### **Font Settings**

In this section, you can assign which font you want to use for specific text types/sections in your app.

&#x20;![](https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FX5llgcPqgJNXjWGkMN6Y%2FScreenshot%202022-10-26%20at%2016.46.49.png?alt=media\&token=22fba5ed-de7d-4b0a-a127-0129d5126e79)

#### **Navigation Bar**

This section allows you to change the color settings for the background of the navigation bar (and the color's opacity), the color of the text on the navigation bar, the logo shown on the navigation bar, and whether or not the text (or title) is shown in the navigation bar.&#x20;

&#x20;![](https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FcNzGBB3JLTWOJqkcOg55%2FScreenshot%202022-10-26%20at%2016.47.47.png?alt=media\&token=d0e0a4e6-480a-4fa1-8b4f-ca087255f2d4)

#### **Background**

You can choose to have no background, a color background, a background with a color gradient, or a custom image. You can further customize the image with filter options or a color overlay. Color overlays can help make text pop or be more visible in front of busy background images.&#x20;

#### **Element Shapes**

This allows you to customize the rounding on buttons, input fields, and/or card in your app.&#x20;

<figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FftfZNDjtMumyEtz4Cfn4%2FScreenshot%202022-10-27%20at%2010.39.01.png?alt=media&#x26;token=2fd59d1a-6be7-436b-bfe3-3bd5fd68f953" alt=""><figcaption></figcaption></figure>