Advanced Theming

Most teams should style in the Appearance editor. Use this page when a host application needs code-level control.

Precedence

The client resolves presentation in this order:

1. A web component theme attribute overrides the saved mode.
2. --formwork-* variables set on the host element override saved values.
3. Saved form-version values apply next.
4. Built-in defaults fill anything unset.

Force the mode

<formwork-form form-id="FORM_ID" theme="dark"></formwork-form>

Accepted values are auto, light, and dark. Invalid values are normalised to auto.

Colour variables

Each colour exists for both light and dark. Replace {mode} with either word:

Layout and type variables

Example override

<style>
  #support-form {
    --formwork-light-primary: #0f766e;
    --formwork-dark-primary: #2dd4bf;
    --formwork-light-bg: #f8fafc;
    --formwork-light-card-bg: #ffffff;
    --formwork-light-text-primary: #0f172a;
    --formwork-light-border: #cbd5e1;
    --formwork-radius: 4px;
    --formwork-font-family: Inter, sans-serif;
    --formwork-max-width: 720px;
  }
</style>

<formwork-form id="support-form" form-id="FORM_ID"></formwork-form>
<script src="https://app.useformwork.com/static/client.js" type="module"></script>

Shadow and light DOM

The default render mode uses an open shadow root. Variables set on the host cross that boundary, but ordinary host selectors do not style internal elements.

Set render-mode="light" only when the form must participate in the page’s light DOM. The component still injects its own client stylesheet, and broad host-page selectors can then affect it, so test for CSS collisions.

<formwork-form form-id="FORM_ID" render-mode="light"></formwork-form>

Troubleshooting