Themes gallery

A live tour of the themes that ship with Krysalicss. Use the theme switcher in the page header to flip the entire site between bundled themes — what you see in the chrome is what you get when you opt in. For lookup, rationale, and authoring, follow the links under each swatch row.

This page is a gallery surface. Three sibling pages cover the other Diátaxis modes:

Reference: /reference/themes — every shipped theme's (bg, fg) pairs and per-pair contrast ratio.
Explanation: /explanation/theme-architecture — why three themes, what each one targets, why high-contrast is opt-in only.
How-to: /how-to/author-a-theme (local) or /how-to/author-and-publish-a-theme (npm) — author a theme of your own, including community-gallery submission guidelines.

`default`

<html class="theme-light">  <!-- explicit override -->
<html>                       <!-- implicit: default wins at :root -->

`dark`

<html class="theme-dark">    <!-- explicit override -->
<!-- or rely on @media (prefers-color-scheme: dark) -->

`high-contrast`

<html class="theme-high-contrast">

Community themes

Empty for now. Community themes appear here as they're published. See the submission guidelines for the package shape, the WCAG checks, and the merge-request flow.