# 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FsbNoBUnpnGVtYBrhc3td%2Fcolor-mode.jpg?alt=media&#x26;token=8b744bf2-bdd9-4d81-a55a-3a9b261039de" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FHIgzodmFV57C6cpmfr9F%2Fbody-color.jpg?alt=media&#x26;token=7ea07fd5-e8ae-494b-8e11-3fbe0ba39487" alt=""><figcaption><p>Body Color</p></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FUgduPOfmZqsOw1dXIJY2%2Fheader-color.jpg?alt=media&#x26;token=2d2f764f-feca-4347-b948-ebc5d4f34dce" alt=""><figcaption><p>Header Color</p></figcaption></figure></div>

<div><figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FMUze8WYKPctXD7DoECHi%2Fmain-menu-color.jpg?alt=media&#x26;token=d955eae6-bc51-42a1-b52f-3da2f718ec58" alt=""><figcaption><p>Main Menu Color</p></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FlvGGQXGSoF1XDICI07D6%2Foffcanvas-color.jpg?alt=media&#x26;token=ff90119e-52e9-40a5-80e5-ecb604b75985" alt=""><figcaption><p>Off-canvas Menu Color</p></figcaption></figure></div>

<div><figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FhV7CNqfdU7vECqeTf2AR%2Fdropdown-color.jpg?alt=media&#x26;token=db80678d-3c0b-4b8d-bd5f-081b053e9192" alt=""><figcaption><p>Drop-down Menu Color</p></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FuVsxdEtuhM8wjmjMUltq%2Fmobile-menu-color.jpg?alt=media&#x26;token=47bba47f-22ec-43e0-96b8-6c6a671c1764" alt=""><figcaption><p>Mobile Menu Color</p></figcaption></figure></div>

<div><figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FY4nwHsgSOpVWV8tP2Elk%2Ffooter-color.jpg?alt=media&#x26;token=be68f2fa-b01c-4b7a-a118-a1b2b8494d14" alt=""><figcaption></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FPxGP7swVnTFTl7hLjWfQ%2Fsticky-header-color.jpg?alt=media&#x26;token=5eb0ad3b-8426-48c6-b7ef-09bf59b6f83e" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2Fv2kdAQr9frISLIdSlE0L%2Fedit-bg-color-section-layout.jpg?alt=media&#x26;token=21f6d55b-61b4-42bf-92d4-fb1614497aa1" alt=""><figcaption><p>Edit the section</p></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FbQgSLVhPT5hOwWyMxIU9%2Fchange-bg-color-footer.jpg?alt=media&#x26;token=e73c4515-a983-4b40-8a84-021ad5ab6940" alt=""><figcaption><p>Change the background color of the section</p></figcaption></figure></div>