# Theme Options

## Editing a Theme

<figure><img src="/files/grMehnXKH6Z6mtER6Qvg" alt=""><figcaption><p>Find a Theme to Edit from the Dropdown</p></figcaption></figure>

On the theme options page, you are presented with a dropdown selector where you can choose to edit a particular theme.

<figure><img src="/files/UsLYfyVcaRjCSLWHHzb1" alt=""><figcaption><p>Theme Selector</p></figcaption></figure>

{% hint style="warning" %}
**Saved Changes:** If you choose to select a new theme, any unsaved changes will be lost.
{% endhint %}

## Editing Theme Colors

<figure><img src="/files/vTzEr1u39wiBSiwbj80f" alt=""><figcaption><p>Editing a Theme's Colors</p></figcaption></figure>

Editing a theme is as straightforward as selecting some parts of the theme's colors to override. The preview will automatically update with the selected colors.

The default colors are shown, and you can customize the theme to match your site's colors. This allows you to use the design of the quote, but to your own tastes.

<figure><img src="/files/Mm0PoLo57Ir7lmDZ8Xvz" alt=""><figcaption><p>Save or Reset Theme Colors</p></figcaption></figure>

When you are done editing the colors, you can save or reset the options.

## Editing Font Sizes Per Breakpoint

You can edit the font sizes for the mobile, tablet, and desktop breakpoints.

{% hint style="info" %}
**Custom Breakpoints:** Unfortunately with the current state of CSS, it is difficult to have dynamic breakpoints. As a result, the breakpoints cannot be edited.
{% endhint %}

<div><figure><img src="/files/ynINqN86iSmLm6ELgaT6" alt=""><figcaption><p>Mobile Size Options</p></figcaption></figure> <figure><img src="/files/m3ndqso9PIJsdc4kNVcE" alt=""><figcaption><p>Tablet Size Options</p></figcaption></figure> <figure><img src="/files/Ir6EwwigzVzCaDpu7fQy" alt=""><figcaption><p>Desktop Size Options</p></figcaption></figure></div>

For each breakpoint (desktop, tablet, and mobile), you can modify:

* The base font size (default is 16px for desktop).
* The line height of the quote
* The base button font size (default is 16px for desktop)

{% hint style="info" %}
**Base Fonts:** a base font is what all child elements use. For example, with a base font size of 16px, a 1em font-size will also be 16px. If the base font size is increased, then 1em becomes even higher.
{% endhint %}

## Custom Fonts per Theme

Finally, you can set custom fonts per theme. These will override any advanced options.

<figure><img src="/files/SxqHNdcZHJGS2e321Fjy" alt=""><figcaption><p>Selecting a Custom Font Per Theme</p></figcaption></figure>

There's a convenient preview button so you can see what the fonts will look like in a modal.

<div><figure><img src="/files/Cz48cgDJALKJh5uHI5AQ" alt=""><figcaption><p>Setting a Custom Font </p></figcaption></figure> <figure><img src="/files/zQeElv6E8UmBrAkt2XjG" alt=""><figcaption><p>Font Preview in a popup Modal</p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dlxplugins.com/quotes-dlx/admin-settings/theme-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.