# Theme customization

{% embed url="<https://www.youtube.com/watch?v=5Bp8aMDAP18&>" %}

### Theme node

The theme node is located under the settings node in your content tree. There you can change colors, fonts, logos and more.

<div align="left"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MN8pRSzhM0drDi65q43%2F-MN8rzOJPpvWKszwGOre%2Fimage.png?alt=media&#x26;token=545f161c-ce33-424b-b930-1b0d02c0a6cf" alt=""></div>

### Fonts

By default Igloo uses [Roboto Font.](https://fonts.google.com/specimen/Roboto) To change this first change the Embed Font under Theme -> General. Next change the font stack on Body Font & Heading Font

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MND_L0g4N4bFmV3FsQi%2F-MNDb408UBqZIcQ5YqdN%2Fimage.png?alt=media\&token=d8774eba-ba50-4de5-904c-4acd2ed22dee)

### Logo

Under the theme node you can add two logos, one that works on a dark background and one that works on a light background. We recommend that you use  `.svg` image for you logo.

<div align="left"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MN9dQtwks4BS_v3MCxc%2F-MN9dtpm-CNY3FMI2QVo%2Fimage.png?alt=media&#x26;token=23f97637-5391-44c6-9b39-dd9b589b78bc" alt=""></div>

### Theme Explorer

<div align="left"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MN9elZ9m7Tj54nlfRAC%2F-MN9fCKsHT9f3vURm9cf%2FKapture%202020-11-27%20at%2018.07.27.gif?alt=media&#x26;token=4807cd37-2326-48b0-bd90-2fdcfb49ae91" alt=""></div>

When you're previewing the content you're working with, you can use the **Theme Explorer** to change colors on the website, set different fonts for the headings and text as well as customize various other aspects of the website.

**To access the Theme Explorer, follow these steps:**

1. Select a piece of content from the Content tree
2. Use the *Preview* feature at the bottom of the page
3. Access the Theme Explorer by selecting the green pencil-button in the right side of the screen

**The Theme Explorer contains the following sections:**

* **Colors**: Define the colors being used throughout the website
* **Text**: Change the fonts used for headings and the main body of text
* **Header**: Customize how the header of the site should look
* **Footer**: Change the theme and size of the Footer
* **Grid**: Define various size-dimensions for the Grid widget
* **Forms**: Set the border radius for buttons in forms on the website

Any changes made and saved through the Theme Explorer will automatically be saved to the *Theme* settings.