## Dark and light color schemes

Product: Auno - Minimal Portfolio FSE WordPress Theme
URL: https://hub.jkdevstudio.com/docs/auno/styles-and-settings/color-schemes
Updated: 2026-10-26
Summary: Choose which scheme visitors see first, show or hide the switch in the header, decide where the choice is remembered, and set the light colors.

Auno has a dark and a light color scheme, and visitors can switch between them from the header. The choice is remembered on their next visit. Both schemes are in the theme itself, with no plugin.

## Set the scheme and the switch

Go to [[Appearance > Customize > Auno Theme > Color scheme]].

<figure class="doc-figure" data-align="center" data-width="50%"><img src="https://hub.jkdevstudio.com/storage/docs/2026/10/a6305568-a81a-415b-8b0a-02c3fbfd56a5.webp" alt="The Color scheme section of the Auno Theme panel with Default color scheme set to Dark, the switcher on and the choice kept in a cookie"><figcaption>The Color scheme section of the Customizer.</figcaption></figure>

:::options

- **Default color scheme** (default: dark): What a first-time visitor sees: **Dark**, **Light** or **System**, which follows the visitor's device.

- **Color scheme switcher** (default: on): Shows the system, light and dark control at the top right of the page. Off, everyone gets the default scheme. The setting below hides while this one is off.

- **Remember the choice in** (default: cookie): Where a visitor's choice is kept. A cookie reaches the server, so the right scheme is drawn before the page appears. **Local storage** stays in the browser only.

:::

On phones the switch is a single sun or moon icon that flips between light and dark.

## Change the light colors

Every color the site uses has a light twin. Change the light scheme at [[Appearance > Editor > Styles > Colors]] by editing the colors whose names start with **Light**: **Light base**, **Light surface**, **Light contrast**, **Light muted** and **Light border**. The **Accent** color is shared by both schemes. The full palette with its defaults is in [colors, fonts and layout](https://hub.jkdevstudio.com/docs/auno/styles-and-settings/colors-fonts-and-layout).

:::steps

### Open the palette

Go to [[Appearance > Editor > Styles > Colors]] and open the palette.

### Edit the light colors

Click **Light base** and pick the new value, then the other **Light** colors you want to change. The preview keeps showing the dark scheme, because that is what the Site Editor draws.

### Save and check the light scheme

Click **Save**. Open the site, switch to light in the header, and the new colors show.

:::

<div data-callout="tip">

The **Sand** style variation sets both schemes at once, so applying it changes the light colors too.

</div>

## Your own content in both schemes

The theme repaints its own blocks. A color you set by hand on a block, or an image with its own dark or light background, stays the same in both schemes, so pick palette colors for anything that should follow the switch.

## Questions

<details><summary>Can I make the whole site light only?</summary>

Set **Default color scheme** to **Light** and turn off **Color scheme switcher**. Every visitor then gets the light site with nothing to switch, and a choice stored on an earlier visit is ignored.

</details>

<details><summary>Cookie or local storage?</summary>

Cookie, unless you have a reason. The server reads it, so the right scheme applies as the page loads. Local storage can show the default scheme for a moment before the stored one takes over.

</details>

<details><summary>Some cards stayed dark for a moment after switching to light</summary>

The switch repaints everything on the page at once. If a card still lags, clear the page cache and any caching plugin, then reload.

</details>