> ## Documentation Index
> Fetch the complete documentation index at: https://docs.softr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Application Theme

> Configuring your app’s theme.

<Frame caption="Theme section">
  <img src="https://mintcdn.com/softr-2b8a27e1/-JsdyX1th5sWoqTC/styling/images/application-theme/image1.png?fit=max&auto=format&n=-JsdyX1th5sWoqTC&q=85&s=772eaf8c7f6b5bafc5f582c72fd4a1a7" alt="Theme section" width="916" height="1054" data-path="styling/images/application-theme/image1.png" />
</Frame>

In the **Theme** section, you can set the default styles and colors for all the building blocks and then customize them for each block separately (from block’s [Styles and Colors settings](/styling/7qXYEkNvWQamR6vcLXzZnF/block-styles-and-formatting/dy4vuKjHgksR4pDJLFKAHP)) if needed.

First comes the **Base Text Size**, which will correspond to the **“m”** size in the individual text field settings. For instance, if you've selected the **Base Text Size** as "16px", the **"m"** **Text Size** in block settings will correspond to 16px, and the other sizes ("s," "l," and so on) will work accordingly.

<Frame caption="Changing font size in Block Settings">
  <img src="https://mintcdn.com/softr-2b8a27e1/-JsdyX1th5sWoqTC/styling/images/application-theme/image2.gif?s=b399e734c2ac950b91dee1d9f8d9ff2b" alt="Changing font size in Block Settings" width="1213" height="376" data-path="styling/images/application-theme/image2.gif" />
</Frame>

Next you can set the default **Font Family**, **Font Weight**, and **Color** for your Header (titles) and Body (subtitles and the rest).

Further on, you can set the default **Text Size**, **Text Color**, and **Background Color** for your **buttons**.

Finally, we have the **Advanced** section, where you can set the **Website width**.

<Frame caption="Advanced section">
  <img src="https://mintcdn.com/softr-2b8a27e1/-JsdyX1th5sWoqTC/styling/images/application-theme/image3.png?fit=max&auto=format&n=-JsdyX1th5sWoqTC&q=85&s=ace42730c48e3c74c1d0e30845c2e02b" alt="Advanced section" width="906" height="836" data-path="styling/images/application-theme/image3.png" />
</Frame>

You can set the width to **Fixed** (controlled by you), **Full** (to occupy the full width of the screen), or define a **Custom width** (should be at least 1140px).

<Frame caption="The process of configuring the Theme">
  <img src="https://mintcdn.com/softr-2b8a27e1/-JsdyX1th5sWoqTC/styling/images/application-theme/image4.gif?s=214002052022ec60a817566faa9ac1b9" alt="The process of configuring the Theme" width="1435" height="706" data-path="styling/images/application-theme/image4.gif" />
</Frame>
