Skip to content

JPROT
Docs Examples Showcase Publish GitHub
JPROTStart hereFirst siteWrite contentConfigureCustomizePublishCatalog elementsCLI referenceAPI referenceExamplesTroubleshootingFAQArchitectureComparisonShowcaseResumeBlogfrontmatter

On this page

What the variables cover
JPROTStart hereFirst siteWrite contentConfigureCustomizePublishCatalog elementsCLI referenceAPI referenceExamplesTroubleshootingFAQArchitectureComparisonShowcaseResumeBlogfrontmatter

On this page

What the variables cover
JPROT/Building a theme system with CSS variables

Building a theme system with CSS variables

The whole design is driven by a small set of CSS variables defined in :root. To create a dark variant, we simply redefine those variables under [data-theme="dark"].

What the variables cover

  • Colors — background, surface, text, accent
  • Typography — fonts and size
  • Spacing — container width and radius

Override any of them in theme/custom.css and never touch a component.

The customization guide shows the full list.

© 2026 JPROT — Built with JPROT