Skip to content
FormKrafter

Guides

Theming

FormKrafter ships one stylesheet of about 6 KB, and it is opt-in. There is no CSS framework underneath, no global reset, and nothing that escapes the .fk-* class namespace — so it can drop into an existing design system without a fight.

Design tokens

Section titled “Design tokens”

Everything visual flows through CSS custom properties. Override them anywhere in the cascade — globally, or scoped to one subtree:

Token Light Dark
--fk-color-primary #2b7a81 #4fb8b2
--fk-color-surface #ffffff #111c24
--fk-color-border #d5dde2 #2d3f4b
--fk-color-text text —
--fk-color-muted secondary text —
--fk-color-danger error state —
--fk-radius corner radius —
--fk-spacing base spacing unit —
--fk-font font stack —
Scoped to one section
.checkout-form {
  --fk-color-primary: #7c3aed;
  --fk-radius: 2px;
}

Dark mode

Section titled “Dark mode”

Dark mode activates through the cascade — no JavaScript, no theme provider, no re-render. Either signal works:

<html class="dark">
  <fk-form-render></fk-form-render>
</html>

Bring your own CSS

Section titled “Bring your own CSS”

Skipping styles.css entirely and writing your own .fk-* rules is a supported strategy, not a workaround. The components emit stable class names and no inline styles for anything you’d want to control.

Just don't import it
import { FkFormRender } from '@streamline-pulse/formkrafter-react'
// import '@streamline-pulse/formkrafter-wc/styles.css'  ← omit this

Next steps

Section titled “Next steps”
BricksThe class names each brick renders, and how to build your own.
InternationalizationThe other half of white-labeling: translating the builder chrome.
Components referenceWhere styles.css is imported from and what it covers.

A project by Streamline Pulse