> For the complete documentation index, see [llms.txt](https://docs.jollyany.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jollyany.co/basics/color-mode.md).

# Color Mode

### Enable Color Mode

Go to Template Options > Basic > Page Settings > Enable the color mode

* Color Mode Default: Choose a color mode that will be a default mode

<figure><img src="/files/IhYfPTRkCAe6Qm0hdFXJ" alt=""><figcaption><p>Enable the color mode</p></figcaption></figure>

### Adjust the color modes

After enabling the color mode, you should go to the Color section and set up the color for the body, header, main menu, sticky menu, off-canvas menu, drop-down menu, mobile menu, and footer in both light and dark modes.&#x20;

If you do not adjust the color between light and dark modes, you will not see changes when changing the color mode in the front end.&#x20;

<div><figure><img src="/files/ZOPfptFVFvQIf7qELIaT" alt=""><figcaption><p>Body Color</p></figcaption></figure> <figure><img src="/files/3Axo1LaHzZBmkxxa4wc9" alt=""><figcaption><p>Header Color</p></figcaption></figure></div>

<div><figure><img src="/files/oMgYgPTaBYGE5WJtzY2W" alt=""><figcaption><p>Main Menu Color</p></figcaption></figure> <figure><img src="/files/5F1p3wWDcBWJ0ZrXZQ0T" alt=""><figcaption><p>Off-canvas Menu Color</p></figcaption></figure></div>

<div><figure><img src="/files/miF5bwlF3ukEohYMMoyq" alt=""><figcaption><p>Drop-down Menu Color</p></figcaption></figure> <figure><img src="/files/QGOJ24iZRKtaKtrZ9VKs" alt=""><figcaption><p>Mobile Menu Color</p></figcaption></figure></div>

<div><figure><img src="/files/MLwSBx6K0wWbyXVdHz2p" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Eq6hMdI25h5Ulk7PcrSs" alt=""><figcaption></figcaption></figure></div>

### Edit the color for each section manually

You can change the background color and customize the color for each section in the layout by editing a section > Design tab > Turning on the background color > editing the color of both light and dark modes

Turning on the Custom code, you'll be able to change the text color, link color and link hover color.&#x20;

<div><figure><img src="/files/Y2siQpypD3BpX29BbNCB" alt=""><figcaption><p>Edit the section</p></figcaption></figure> <figure><img src="/files/7A8vLSsP2ssBstSaDfd1" alt=""><figcaption><p>Change the background color of the section</p></figcaption></figure></div>