${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

Color schemes can be defined for the entire document using <html data-theme="light"> or for specific HTML elements, such as <article data-theme="dark">.

Color schemes at the HTML tag level work great for elements such as a, button, table, input, textarea, select, article, dialog, progress.

CSS variables specific to the color scheme are assigned to every HTML tag. However, to maintain transparent backgrounds and ensure colors are inherited from the parent tag, we have not enforced specific background and color settings across all HTML tags.

For some other HTML tags, you might need to explicitly specify background-color and color.

Light theme

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

Dark theme

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