PhloTour
EN NL
13 / 30

Themes

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

Read the docs →
.phlo
// a theme is a set of CSS variables -> compiles to theme.neon.css
<style ns=theme.neon>
:root {
	$bg: #000000
	$surface: #131313
	$text: #f0f0f0
	$primary: #00ffea
}
</style>

// switching removes the current theme stylesheet and loads the new one
route both GET set theme $name {
	%cookies->theme = $name
	return apply(remove: 'link[href*="/theme."]', css: '/theme.'.$name.'.css', trans: %app->transVal)
}
		
Live preview

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