Theming

Skip past table of contents

Search

Table of contents

Start of documentation content

Formally has been designed to allow easy theming.

Formally has default CSS designed to inherit your page styles, and to be themed.

If you wish to customise the HTML or other behaviour of Formally instead try the React SDK Custom Controls.

Theme variables (recommended)

CSS Custom Variables (aka CSS Custom Properties) builds upon the default CSS that Formally provides, and makes for easy upgrades in the future.

The default CSS that Formally provides has been designed to allow customisation through these variables:

  • --formally-max-width: 500px;
  • --formally-node-gap: 1.75rem;
  • --formally-field-padding-vertical: 0.75rem;
  • --formally-field-padding-horizontal: 1rem;
  • --formally-space-xs: 0.5rem;
  • --formally-space-sm: 0.75rem;
  • --formally-space-md: 1rem;
  • --formally-space-lg: 1.25rem;
  • --formally-space-xl: 2rem;
  • --formally-color-brand-lighter: rgba(101, 0, 255, 0.1);
  • --formally-color-brand-light: rgba(101, 0, 255, 0.2);
  • --formally-color-brand: #6100ff;
  • --formally-color-brand-dark: #5000c9;
  • --formally-color-brand-darker: #430099;
  • --formally-color-grey: #595959;
  • --formally-color-grey-light: #d0d0d0;
  • --formally-color-hint: var(--formally-color-grey);
  • --formally-color-content: #000;
  • --formally-color-background: #fff;
  • --formally-color-placeholder: #595959;
  • --formally-color-warn: #b5031f;
  • --formally-error-border-width: 2px;
  • --formally-border-radius: 4px;
  • --formally-text-error-border-width: 2px;
  • --formally-text-border-radius: 4px;
  • --formally-select-border-radius: 4px;
  • --formally-submit-pending-font-size: 1em;
  • --formally-submit-pending-text-align: right;
  • --formally-checkbox-size: 24px;
  • --formally-checkbox-border-radius: 4px;
  • --formally-radio-size: 24px;
  • --formally-button-radius: 4px;
  • --formally-button-padding-vertical: 12rem;
  • --formally-button-padding-horizontal: 24rem;
  • --formally-font-size-smaller: 0.875em;
  • --formally-font-size-larger: 1.125em;
  • --formally-label-font-size: inherit;
  • --formally-label-font-weight: bold;
  • --formally-input-border-width: 1px;
  • --formally-label-color: var(--formally-color-content);
  • --formally-dateinput-border-radius: 4px;
  • --formally-slider-margin-top: 25px
  • --formally-slider-track-bg: #e4caff;
  • --formally-slider-track-height: 0.5rem;
  • --formally-slider-track-border-radius: 0.5rem;
  • --formally-slider-thumb-size-pixels: 2.75rem;
  • --formally-slider-thumb-margin-top: -1.1875rem;
  • --formally-slider-thumb-bg: #fff;
  • --formally-slider-thumb-border-width: 0.75rem;
  • --formally-slider-thumb-border: var(--formally-slider-thumb-border-width) solid var(--formally-color-brand);
  • --formally-color-slider-unset: #999;
  • --formally-xs-button-group-flex-direction: column; // configure responsive button groups at small viewports. Change to 'row' to make them not full-width.
  • --formally-md-button-group-flex-direction: row; // configure responsive button groups at small viewports. Change to 'column' to make them full-width.

You can customise this theme by adding your own CSS,

<link rel="stylesheet" href="https://form-data.getformally.com/styles.min.css" />
<style>
.formally-root {
  /* configure any Formally CSS Variables here */
  --formally-color-brand: red;
}
</style>

This is the recommended approach to theming as it doesn't fork Formally's default CSS.

Visit MDN to read about CSS Custom Properties.

Custom CSS

Using Formally's default CSS is optional and as such developers may use their own CSS instead.

However this isn't recommended as it may incur a significant maintenance burden when upgrading to newer versions of Formally.

If this approach is chosen please ensure that you use a specific version of Formally via NPM or UNPKG to avoid breaking changes. Do not use our CDN hosted version which is always the latest version and may have breaking changes against your custom CSS.