Themes

A theme is a CSS file that gives a value to every color variable. Two themes ship with the library: sakura and aqua.

Apply a theme

Import the file and name the theme on the root element.

import '@halleyfante/pix/themes/aqua.css';

<html data-theme="aqua">

Switch at runtime

Import every theme you need, then change the attribute.

document.documentElement.dataset.theme = 'aqua';

Theme one part of the page

The attribute works on any element and themes everything inside it.

<html data-theme="sakura">
  <body>
    <section data-theme="aqua">This section uses aqua.</section>
  </body>
</html>

Colors

Variable	sakura	aqua	Purpose
`--pix-color-background`	#fde8ec	#e3f6f4	Page background.
`--pix-color-surface`	#fff7f8	#f7fdfc	Areas that sit on the page: sidebars, panels, code blocks.
`--pix-color-text`	#4a2a35	#263238	Main text.
`--pix-color-text-muted`	#85566a	#56707a	Secondary text.
`--pix-color-border`	#4a2a35	#263238	Outlines.
`--pix-color-primary`	#e8799b	#39c5bb	Main color: links and active elements.
`--pix-color-primary-text`	#4a2a35	#12201f	Text placed on top of the primary color.
`--pix-color-accent`	#5f9e6a	#e12885	Highlights and the focus outline.
`--pix-color-shadow`	#e9b7c4	#b5e3df	Hard pixel shadows.

Create a theme

Create a CSS file with a selector for your theme name and set all nine color variables.

[data-theme='midnight'] {
  --pix-color-background: #e3f6f4;
  --pix-color-surface: #f7fdfc;
  --pix-color-text: #263238;
  --pix-color-text-muted: #56707a;
  --pix-color-border: #263238;
  --pix-color-primary: #39c5bb;
  --pix-color-primary-text: #12201f;
  --pix-color-accent: #e12885;
  --pix-color-shadow: #b5e3df;
}

Import it after the tokens and use its name on the root element.

import '@halleyfante/pix/tokens.css';
import './midnight.css';

<html data-theme="midnight">