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

# Theme and layout

> Set copyright visibility, choose widget theme mode, and control layout sizing behavior.

Use this page to set the base visual behavior of your widget before deeper styling.

Click the [**Branding**](https://app.remapdb.com/widget/branding) item in the main navigation.

## Before you start

* Make sure you are editing the correct widget.
* Open a live page where this widget is installed, so you can verify changes after each edit.

<Info>
  If a control is disabled, check your [plan](https://app.remapdb.com/settings/billing) and [feature access](/feature-availability-by-plan).
</Info>

## Copyright notice

In the **Copyright notice** section, the **Show copyright notice** switch controls whether the widget shows the Remapdb logo and copyright details.

What to expect:

* The switch is on by default.
* If branding removal access is available, you can turn it on or off.
* If branding removal access is not available, the switch remains on.

### Change the copyright notice setting

1. Go to the **Copyright notice** section.
2. Turn the **Show copyright notice** switch on or off.
3. Wait for save confirmation and preview refresh.

## Theme mode

In the **Theme** dropdown, choose how the widget theme behaves:

| Theme option | What it does                                                                  |
| ------------ | ----------------------------------------------------------------------------- |
| Light        | Always uses light widget theme                                                |
| Dark         | Always uses dark widget theme                                                 |
| Auto         | Uses automatic mode and follows your website theme (light/dark) in real time. |

### Change theme mode

1. Open the **Theme** dropdown.
2. Click **Light**, **Dark**, or **Auto**.
3. Wait for save confirmation and preview refresh.

## Auto mode behavior

When **Theme** is set to **Auto**, the widget automatically follows your website theme.

What this means:

* No additional sync toggle is required.
* Theme updates follow your website light/dark state.
* Best for a consistent page + widget look.

<Info>
  For custom theme switchers, use the programmatic integration guide:
  [Sync widget theme with website](/widget/branding/theme-sync-with-website)
</Info>

## Colors and sizes panel

The **Customize colors and sizes ...** row opens a side panel where you can adjust visual variables and sizing.

Theme dependency:

* When **Theme** is **Light**, the side panel uses Light styling values.
* When **Theme** is **Dark**, the side panel uses Dark styling values.
* When **Theme** is **Auto**, the side panel works with both Light and Dark color values.
* When **Theme** is **Auto**, a **Light theme / Dark theme** switch appears at the top of the side panel.
* When **Theme** is **Light** or **Dark**, that side-panel switch is hidden.

1. Click the **Customize colors and sizes ...** row.
2. In the side panel, adjust values you need.
3. Click the **Save** button.

## Verify on live website

* Open the live widget page.
* Confirm theme matches your expected look.
* Confirm text remains readable in all key areas.
* Confirm spacing and controls look correct on desktop and mobile.

## Related actions

* [Branding](/widget/branding)
* [Sync widget theme with website](/widget/branding/theme-sync-with-website)
* [Colors and typography](/widget/branding/colors-and-typography)
* [Custom CSS styling](/widget/branding/custom-css-styling)