> For the complete documentation index, see [llms.txt](https://aba-1.gitbook.io/aba-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aba-1.gitbook.io/aba-docs/customization/layout-appearance.md).

# Layout appearance

## DAY/DARK MODE

In order to change appearance of this template, just open dropdown menu and toggle **Dark mode checkbox**!

Dark mode turns the light surfaces of the page dark, creating an experience ideal for night.

![](https://1147971259-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lt_brEowQtV6heyCRK0%2F-Lt_d5USa0GBFKGMjfN2%2F-Lt_h5KdrDl98_po9USQ%2Fday-dark.jpg?alt=media\&token=eaae1e43-1c92-4234-8df9-60e1bf1bf05d)

## How it works

&#x20;It all starts at `<body>` tag, here you can find `id="day-mode"`

<div align="left"><img src="https://1147971259-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lt_brEowQtV6heyCRK0%2F-Lt_d5USa0GBFKGMjfN2%2F-Lt_hz4O8xwwrILmeuRj%2Fday-darkHTML.JPG?alt=media&amp;token=73f163bf-92c6-4336-b5bf-e2dee85435db" alt=""></div>

&#x20;In `style.css` file, you can change or set up new parameters.

<div align="left"><img src="https://1147971259-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lt_brEowQtV6heyCRK0%2F-Lt_d5USa0GBFKGMjfN2%2F-Lt_izIsuKHbOsTtJ5DJ%2Fday-darkCSS.JPG?alt=media&amp;token=ff5e467c-6a81-4f32-a95b-40cbf13a8287" alt=""></div>

&#x20;Next in `script.js`, you can find `function` that will toggle `day-mode or dark-mode` and give awesome experience of changing template appearance.

<div align="left"><img src="https://1147971259-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lt_brEowQtV6heyCRK0%2F-Lt_d5USa0GBFKGMjfN2%2F-Lt_j8voPseAhQIDm8ks%2Fday-darkJS.JPG?alt=media&amp;token=6beffa3f-d3e2-4dae-ba27-92def683b560" alt=""></div>
