> For the complete documentation index, see [llms.txt](https://playground.e107sk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://playground.e107sk.com/e107-aragorn-theme/theme-structure/theme-shortcodes/theme-toggle.md).
# {THEME\_TOGGLE}
**Status: done (100%)**
The dark/light switch in the header.
## Usage
```html
{THEME_TOGGLE}
```
Used in both header partials.
## How it works
Two buttons, not one. Tabler shows whichever matches the current scheme through `.hide-theme-dark` and `.hide-theme-light`, so no state has to be tracked in the markup and no positioning is needed — a `position: fixed` here would pull the control out of the header.
The markup follows Tabler's `layout-horizontal.html`, with one change: Tabler uses ``, which navigates and leaves a query string behind. The buttons here carry `data-bs-theme-value` instead, read by `js/theme-toggle.js` — no navigation, no query string.
{% hint style="warning" %}
The click handler and the pre-paint script `js/tabler-theme.min.js` must use the **same** localStorage key, `tabler-theme`. The pre-paint script runs in ``, before the browser starts rendering ``, and sets `data-bs-theme` on `` — that is what prevents a flash of the wrong scheme. A key mismatch means the toggle works and the choice is forgotten on the next page load.
{% endhint %}
## Code
```php
// {THEME_TOGGLE}
// Dark/light mode toggle, placed in header_3columns.html inside a
// .nav-item. Not available on layouts where sc_header() suppresses
// {HEADER} (auth, memberdesk) - acceptable, those are transient pages.
function sc_theme_toggle($parm = null)
{
$labelDark = deftrue('LAN_THEME_TOGGLE_DARK', 'Enable dark mode');
$labelLight = deftrue('LAN_THEME_TOGGLE_LIGHT', 'Enable light mode');
return '
';
}
```
## Notes
The two inline SVGs are Tabler's own snippet for this control, kept verbatim rather than swapped for the icon webfont — see [Theme assets](/e107-aragorn-theme/theme-structure/theme-assets.md).
`.theme-toggle-group` in `style.css` only sets `display: flex`.