Aperçu du thème
Guide de style en direct — prévisualisez les thèmes, les modes de couleur et la couverture des composants en un seul endroit.
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.
Mêmes contrôles que le panneau Paramètres → Apparence. Remplace
--zer0-color-primary par-dessus le thème actif.