Custom Theming
ply's theming system is CSS custom properties. Override --ply-* tokens in a [data-theme="your-name"] block, then set that attribute on <html>. No Sass, no build step, no JavaScript framework.
How it works
<!-- 1. Define your theme in CSS -->
<style>
[data-theme="brand"] {
--ply-bg-body: #fefce8;
--ply-color-body: #1a1a1a;
--ply-color-link: #b45309;
/* ... override as many tokens as you need */
}
</style>
<!-- 2. Activate it -->
<html data-theme="brand">
<!-- 3. Or switch at runtime -->
<script>
document.documentElement.setAttribute('data-theme', 'brand');
</script>Components adapt automatically
Info alert — adapts to your theme colors.
Success alert.
Ghost alert — transparent background.
Elevation adapts too
Layer 0
Layer 1
Layer 2
Layer 3
Available tokens
| Token | Purpose |
|---|---|
--ply-bg-body | Page background |
--ply-bg-surface | Card/panel background |
--ply-bg-surface-alt | Alternating surface |
--ply-bg-muted | Muted/disabled background |
--ply-color-body | Primary text |
--ply-color-headings | Heading text |
--ply-color-secondary | Secondary text |
--ply-color-muted | Muted/placeholder text |
--ply-color-text-inverse | Text on dark buttons |
--ply-border-color | Default borders |
--ply-border-strong | Prominent borders |
--ply-border-radius | Global border radius (inputs, cards, dialogs) |
--ply-color-link | Link color |
--ply-color-link-hover | Link hover |
--ply-color-focus | Focus ring |
--ply-color-input-bg | Input background |
--ply-color-input-border | Input border |
--ply-btn-default-bg | Default button background |
--ply-btn-default-hover | Default button hover |
--ply-nav-bg | Navigation background |
--ply-nav-color | Navigation text |
--ply-layer-0 to --ply-layer-3 | Elevation backgrounds |
--ply-shadow-1 to --ply-shadow-3 | Elevation shadows |