Theme Preview
Live style guide — preview skins, color modes, and component coverage in one place.
Updated May 24, 2026Administration
Every section below uses Bootstrap and theme tokens. Switch Skin or Mode
above to see live updates. Overrides from the Appearance panel or _config.yml
theme_color may take precedence over skin tokens for --zer0-color-* variables.
Typography
Heading 1
Heading 2
Heading 3
Lead paragraph — skin tints links and primary accents.
Body text with a sample link and bold / emphasis.
.text-primary
.text-body-secondary
Blockquote using theme ink colors.
Buttons
Alerts
Cards
Border primary
Border and badge follow skin primary.
Forms
Nav tabs
Badges
Primary Secondary Success Danger Warning Info Pill
Code blocks
Inline: const skin = 'aqua' and --zer0-color-primary reference the same token.
Ruby — Rouge syntax highlight
# Zer0-Mistakes skin helper
module Zer0
SKINS = %w[aqua neon carbon forest rose].freeze
def self.apply_skin(name)
raise ArgumentError, "Unknown skin: #{name}" unless SKINS.include?(name)
document.documentElement.setAttribute('data-theme-skin', name)
end
endShell
# Start the dev server with Docker
docker-compose up
# Build the gem and release a patch version
./scripts/bin/release patch --dry-runJSON / config
{
"skin": "aqua",
"mode": "dark",
"tokens": {
"--zer0-color-primary": "#4a90d9",
"--zer0-color-bg-body": "#1a1a2e"
}
}Links
Table
| Token | Skin | Status |
|---|---|---|
--bs-primary | Yes | Live |
--zer0-color-link | Partial* | Config |
| SVG backgrounds | Yes | Live |
List group
- Default item
- Active item (primary)
- Action item
Background layers
Callouts
Accordion
--bs-accordion-active-bg, which the skin layer overrides with --zer0-color-primary at low opacity.
Progress & Spinners
Progress — primary
Progress — striped animated
Stacked progress
Border spinner
Grow spinner
Button with spinner
Breadcrumb & Pagination
Breadcrumb
Pagination
Pagination — small
Tooltips & Popovers
Bootstrap Icons
Icons inherit currentColor — switching modes or applying .text-primary / .text-danger etc. works without extra CSS.
Same controls as the Settings → Appearance panel. Overrides
--zer0-color-primary on top of the active skin.