${require('./_head.html') title=`Themes` description=`Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark').` canonical=`themes.html` } ${require('./_nav.html')}
${require('./_sidebar.html') active=`themes-link`}

Themes

Pico is shipped with 2 consistent themes: Light & Dark.

The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme: dark

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

Light theme

<article data-theme="light">
  …
</article>

Dark theme

${require('./_footer.html')}