Themes

Krysalicss ships three themes. default emits at :root; dark auto-switches via prefers-color-scheme and accepts a .theme-dark override; high-contrast is opt-in only.

Shipped themes

Name	Modifier class	Auto-switch	In batteries-included
`default`	`:root.theme-light`	-	Yes
`dark`	`.theme-dark`	`@media (prefers-color-scheme: dark)`	Yes
`high-contrast`	`:root.theme-high-contrast`	-	No (opt-in)

default

Opt-in

@use '@adnap/krysalicss';

Palette & contrast

Pair	Background	Foreground	Contrast
`bg / fg`	`#ffffff`	`#27282b`	`15.5:1`
`card-bg / card-fg`	`#ffffff`	`#27282b`	`15.5:1`
`link on bg`	`#ffffff`	`#1a6347`	`7.2:1`
`default`	`#ffffff`	`#27282b`	`15.5:1`
`light`	`#c8e6d2`	`#27282b`	`11.0:1`
`primary`	`#1a6347`	`#ffffff`	`7.2:1`
`warning`	`#7a4f10`	`#ffffff`	`7.1:1`
`danger`	`#8c351a`	`#ffffff`	`8.0:1`
`success`	`#525a22`	`#ffffff`	`7.4:1`

dark

Opt-in

@use '@adnap/krysalicss/theme/dark';

Palette & contrast

Pair	Background	Foreground	Contrast
`bg / fg`	`#121417`	`#e6e8eb`	`13.0:1`
`card-bg / card-fg`	`#1b1e22`	`#e6e8eb`	`11.4:1`
`link on bg`	`#121417`	`#6bd1a7`	`8.4:1`
`default`	`#1b1e22`	`#e6e8eb`	`11.4:1`
`light`	`#3e5b40`	`#e6e8eb`	`6.4:1`
`primary`	`#206f4e`	`#f4f6f4`	`5.4:1`
`warning`	`#b8991e`	`#1b1b13`	`8.7:1`
`danger`	`#a2481a`	`#fff6f0`	`5.6:1`
`success`	`#5c6529`	`#f3f6e5`	`7.0:1`

high-contrast

Opt-in

@use '@adnap/krysalicss/theme/high-contrast';

Palette & contrast

Pair	Background	Foreground	Contrast
`bg / fg`	`#000000`	`#ffffff`	`21.0:1`
`card-bg / card-fg`	`#000000`	`#ffffff`	`21.0:1`
`link on bg`	`#000000`	`#ffd500`	`14.7:1`
`link-hover on bg`	`#000000`	`#ffffff`	`21.0:1`
`default`	`#ffffff`	`#000000`	`21.0:1`
`light`	`#ffffff`	`#000000`	`21.0:1`
`primary`	`#00d0ff`	`#000000`	`11.7:1`
`warning`	`#ffd500`	`#000000`	`14.7:1`
`danger`	`#ff8585`	`#000000`	`8.9:1`
`success`	`#00ff84`	`#000000`	`15.6:1`

High-contrast: facts

Property	Value
Minimum contrast ratio	WCAG 2.2 AAA (7:1) on every `(bg, fg)` pair
Border radius	`0` (zeroed across all components)
Auto-switch via `prefers-contrast: more`	No
Auto-switch via `forced-colors: active`	No (independent of OS forced-colours mode)
Activation	Class toggle on `<html>` (see snippet below)

For the rationale behind the manual-only toggle and the forced-colours interaction, see Design philosophy.

// Toggle the high-contrast theme by adding a class to <html>:
document.documentElement.classList.toggle('theme-high-contrast');

Forced-colors interaction

Forced-colors interaction	Behaviour
OS forced-colours active, no Krysalicss high-contrast theme opted in	Framework `system-color` compatibility honours the OS palette.
OS forced-colours active, `theme-high-contrast` opted in	Krysalicss palette wins; OS palette suppressed.

Authoring a new theme

See Author a custom theme and the theme contract reference for the full required-keys list and the theme() mixin signature. For the rationale behind the bundled set — why three themes, why high-contrast is opt-in only — see Theme architecture.