PShowcase
EN NL
12 / 20

Themes

Swap a set of CSS variables and the whole deck recolors.

.phlo
// a theme is just a set of CSS variables
<style ns=theme.neon>
:root {
	$bg: #000000
	$surface: #131313
	$text: #f0f0f0
	$primary: #00ffea
}
</style>

// switch it live by setting one body data attribute
apply(settings: ['theme' => 'neon'])
Live preview

Every surface, border and accent is one CSS variable. Pick a theme: the whole deck recolors instantly, here and in the header.