--- title: "Dark Mode" description: "Adding dark mode to your site." order: 6 --- ## Create an inline theme script Add an inline script to the `` of your base layout. It runs before the body renders, reads the stored preference from `localStorage`, and toggles the `dark` class on the `` element so the page never flashes the wrong theme. ```templ title="layouts/base.templ" showLineNumbers templ BaseLayout(title, description string) { // Theme initialization - must run before body renders to prevent flash { children... } } ``` The preference is stored in `localStorage` under the `theme` key as `light`, `dark`, or `system`. With `system`, the script follows the operating system via `prefers-color-scheme`. ## Add a mode toggle ```templ title="components/themeswitcher/themeswitcher.templ" showLineNumbers package themeswitcher import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/icon" ) templ ThemeSwitcher() { @button.Button(button.Props{ Size: button.SizeIcon, Variant: button.VariantGhost, Attributes: templ.Attributes{ "data-theme-switcher": "true", }, }) { @icon.Eclipse(icon.Props{Class: "size-5"}) } } ``` ## Display the mode toggle Place a mode toggle on your site to toggle between light and dark mode. ```templ title="layouts/base.templ" import "your-app/components/themeswitcher" templ BaseLayout(title, description string) { @themeswitcher.ThemeSwitcher() { children... } } ```