Theming
Customize Cardspark with CSS custom properties, scoped theme wrappers, and targeted component overrides.
Load order
Import the token layer first, a bundled theme second, and the component stylesheet last. Add your own theme stylesheet after those imports so its custom properties win the cascade.
import "@cardspark/ui/tokens.css";import "@cardspark/ui/themes/basement.css";import "@cardspark/ui/styles.css";import "./cardspark-theme.css";Theme tokens
Start with semantic color, type, border, radius, and panel tokens. Components consume these values indirectly, so one theme block can restyle an entire Cardspark surface.
[data-cardspark-theme="collector"] { --cs-font-sans: "Comic Sans MS", "Chalkboard SE", cursive; --cs-font-mono: "Comic Sans MS", "Chalkboard SE", cursive; --cs-color-canvas: #f8f1df; --cs-color-surface: #fffaf0; --cs-color-surface-raised: #efe3c6; --cs-color-text: #20150f; --cs-color-muted: #765e4f; --cs-color-muted-strong: #4b382e; --cs-color-border: #c6ac83; --cs-color-border-strong: #8c6b46; --cs-border-subtle: 0; --cs-border-strong: 0; --cs-color-positive: #087f5b; --cs-color-negative: #c92a2a; --cs-selection-background: transparent; --cs-selection-color: var(--cs-color-text); --cs-selection-muted-color: var(--cs-color-muted); --cs-interaction-outline: #c92a2a; --cs-panel-background: #fffaf0; --cs-panel-border: 0; --cs-panel-shadow: 6px 6px 0 #c6ac83; --cs-panel-radius: 12px; --cs-card-tile-radius: 12px;} [data-cardspark-theme="collector"] .cs-card-tile:hover:not(:has(.cs-card-tile-interaction:focus-visible))::after { border-color: transparent;}Scoped themes
Put a theme attribute on any ancestor to limit the override to that subtree. This is useful for previews, embedded collection tools, or gradual migrations without changing the rest of the app.
<section data-cardspark-theme="collector"> <CardTile format="market" card={card} /></section>Component overrides
Use a wrapper class for deliberate one-off treatments. Prefer Cardspark variables for spacing and surfaces, then add narrow selectors only when the design calls for a component-specific detail.
.featured-card .cs-card-tile { --cs-card-art-padding: 18px; --cs-card-tile-footer-padding: 16px; transform: rotate(-1deg);} .featured-card .cs-card-footer { padding-inline: 16px;}