Design

Colors & Theming

Theme-aware text colors, automatic dark mode, 60 CSS custom properties, and the ability to create fully custom themes.

Colors

Text Color Utilities

Theme-aware semantic text color classes that adapt to light and dark mode automatically.

text-primary — Body text color (theme-aware)

text-secondary — Secondary/subdued text (theme-aware)

text-tertiary — Muted/tertiary text (theme-aware)

text-muted — Alias for text-tertiary

success — Green status text

error — Red status text

Class	Description
`text-primary`	Body text color (theme-aware)
`text-secondary`	Secondary/subdued text (theme-aware)
`text-tertiary`	Muted/tertiary text (theme-aware)
`text-muted`	Alias for text-tertiary
`text-inverse`	Inverse text for dark backgrounds
`success`	Green status text
`error`	Red status text

Dark Mode

Toggle Dark Mode

ply respects prefers-color-scheme automatically. Force a mode with data-theme on the html element.

Current: auto

<!-- Auto (follows OS) -->
<html>

<!-- Force light -->
<html data-theme="light">

<!-- Force dark -->
<html data-theme="dark">

<!-- Toggle with JavaScript -->
<script>
document.documentElement.dataset.theme =
  document.documentElement.dataset.theme === 'dark'
    ? 'light' : 'dark';
</script>

Custom Properties

CSS Custom Properties

Override --ply-* variables to create any theme. All colors, backgrounds, borders, and component styles are customizable.

Backgrounds

Variable	Default (Light)	Description
`--ply-bg-body`	#ffffff	Page background
`--ply-bg-surface`	#ffffff	Card/surface background
`--ply-bg-surface-alt`	#f4f4f4	Alternate surface
`--ply-bg-muted`	#e0e0e0	Muted background

Text Colors

Variable	Default	Description
`--ply-color-body`	#161616	Primary text
`--ply-color-headings`	#161616	Heading text
`--ply-color-secondary`	#525252	Secondary text
`--ply-color-muted`	#767676	Muted text (supplementary)
`--ply-color-placeholder`	#a8a8a8	Placeholder text
`--ply-color-text-inverse`	#ffffff	Inverse (on dark bg)

Interactive

Variable	Default	Description
`--ply-color-link`	#0f62fe	Link color
`--ply-color-link-hover`	#0043ce	Link hover
`--ply-color-focus`	#0f62fe	Focus ring
`--ply-color-input-border`	#8d8d8d	Input borders
`--ply-color-input-bg`	#f4f4f4	Input background
`--ply-btn-default-bg`	#0353e9	Primary button & link color
`--ply-btn-secondary-bg`	#393939	Secondary button bg

Typography

Variable	Default	Description
`--ply-font-body`	System sans-serif	Body text, form controls
`--ply-font-heading`	System sans-serif	Headings (h1–h6)
`--ply-font-mono`	System monospace	Code, pre, kbd, samp

Navigation

Variable	Default	Description
`--ply-nav-bg`	#ffffff	Nav background
`--ply-nav-color`	#161616	Nav text
`--ply-nav-border`	#161616	Nav border
`--ply-nav-hover`	#e8e8e8	Nav hover
`--ply-nav-active-bg`	transparent	Nav active background

Custom

Creating a Custom Theme

Define a new data-theme value and override the CSS custom properties. This lets you create any brand theme while keeping accessibility and all component styles working.

[data-theme="warm"] {
  /* Backgrounds */
  --ply-bg-body: #faf5f0;
  --ply-bg-surface: #f5ebe0;
  --ply-bg-muted: #e6d5c3;

  /* Text */
  --ply-color-body: #1c1917;
  --ply-color-headings: #44240e;
  --ply-color-secondary: #6b4226;

  /* Buttons & Links */
  --ply-btn-default-bg: #92400e;
  --ply-btn-secondary-bg: #78350f;
  --ply-btn-default-color: #fff;

  /* Typography */
  --ply-font-body: Palatino, "Palatino Linotype", Georgia, serif;
  --ply-font-heading: Palatino, "Palatino Linotype", Georgia, serif;

  /* Navigation */
  --ply-nav-bg: #f5ebe0;
  --ply-nav-border: #c2956b;
  --ply-border-color: #d4a574;
  --ply-color-focus: #92400e;

  /* Inputs */
  --ply-color-input-border: #c2956b;
  --ply-color-input-bg: #faf5f0;
}

<html data-theme="warm">

Override as many or as few properties as you need. Any property you don't override keeps its default value. See the buttons page for how primary and secondary buttons respond to themes.

Explore the type scale for text styling, or learn the grid system for page layouts.