Theming

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.

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

A complete list of the CSS Variables that Formally understands is at the end of the page (see "List of all CSS Variables that Formally supports" heading).

Visit MDN to read generally about CSS Custom Properties.

Customing Theme Variables in React

React itself has a variety of methods of applying CSS.

This example uses inline style, however there are alternative examples that follow.

import { Formally } from 'formally';
import 'formally/build/styles.min.css';

export const MyForm = () => (
  <div style={{ '--formally-color-brand': 'red' }}>
    <Formally />
  </div>
);

Customing Theme Variables in React with Next.js

// _app.tsx

import 'formally/build/styles.min.css';
import './my-formally-theme.css';

const MyApp = ({ Component, pageProps }) => (
  return <Component {...pageProps} />
);

export default MyApp;
/* my-formally-theme.css */
.formally-container {
  /* configure any Formally CSS Variables here */
  --formally-color-brand: red;
}

Customising Theme Variables in React with Styled Components

import 'formally/build/styles.min.css';

const FormallyWrapper = styled.div`
  --formally-color-brand: red;
`;

export const MyForm = () => (
  <FormallyWrapper>
    <Formally />
  </FormallyWrapper>
);

Customising Theme Variables in React with CSS Modules

import 'formally/build/styles.min.css';
import styles from './my-formally-theme.module.css';

export const MyForm = () => (
  <div className={styles.myFormallyWrapper}>
    <Formally />
  </div>
);
/* my-formally-theme.module.css */
.myFormallyWrapper {
  /* configure any Formally CSS Variables here */
  --formally-color-brand: red;
}

Customing Theme Variables in HTML / CSS

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

List of all CSS Variables that Formally supports

CSS Variable (CSS Property)AboutDefault value
--formally-node-gapVertical distance between Formally nodes (fields)1.75rem
--formally-field-padding-verticalForm field padding (vertical)0.75rem
--formally-field-padding-horizontalForm field padding (horizontal)1rem
--formally-space-xsSpacing unit XS (extra small)0.5rem
--formally-space-smSpacing unit SM (small)0.75rem
--formally-space-mdSpacing unit MD (medium size)1rem
--formally-space-lgSpacing unit LG (large)1.25rem
--formally-space-xlSpacing unit XL (extra large)2rem
--formally-color-brand-lighterColour variable for lighter brand colourrgba(101, 0, 255, 0.1)
--formally-color-brand-lightColour variable for light brand colourrgba(101, 0, 255, 0.2)
--formally-color-brandColour variable for brand colour#6100ff
--formally-color-brand-darkColour variable for dark brand colour#5000c9
--formally-color-brand-darkerColour variable for darker brand colour#430099
--formally-color-greyColour variable for grey. This variable isn't used directly. You should probably override where this is used instead of overriding this variable.#595959
--formally-color-grey-lightColour variable for grey. This variable isn't used directly. You should probably override where this is used instead of overriding this variable.#d0d0d0
--formally-color-contentColour variable for content.#000
--formally-color-backgroundColour variable for background.#fff
--formally-color-placeholderColour variable for placeholder text. Accessibility-wise placeholder text may be confused for an actual response, so placeholder text isn't recommended.#595959
--formally-color-warnColour variable for warning (error) messages#b5031f
--formally-focus-colorColour variable for field focus ringvar(--formally-color-brand)
--formally-color-hintColour variable for hint textvar(--formally-color-grey)
--formally-label-colorColour variable for label textvar(--formally-color-content)
--formally-error-border-widthThickness of error border2px
--formally-border-radiusRadius of fields4px
--formally-text-border-radiusRadius of text fields (FreeText)4px
--formally-select-border-radiusRadius of dropdown (Select)4px
--formally-button-radiusRadius of buttons6px
--formally-dateinput-border-radiusRadius of date inputs4px
--formally-button-padding-horizontalPadding of buttons (horizontal)1.5rem
--formally-button-padding-verticalPadding of buttons (vertical)0.75rem
--formally-input-border-widthBorder thickness (width) of textural inputs (FreeText etc.)1px
--formally-button-delete-widthWidth of delete button within a Repeater2em
--formally-button-delete-heightHeight of delete button within a Repeater2em
--formally-submit-pending-font-sizeFont size of message that appears when submitting and waiting for a network response1em
--formally-submit-pending-text-alignText alignment of container of message that appears when submitting and waiting for a network responseright
--formally-font-familyDefault font family.sans-serif
--formally-font-size-smallerSmaller font size used for less important small print0.875em
--formally-font-size-largerLarger font size used for important text1.125em
--formally-max-widthMaximum width of the Formally container640px
--formally-label-font-weightLabel boldnessbold
--formally-label-font-sizeLabel font sizeinherit
--formally-border-lightLight colour variation of bordervar(--formally-color-grey)
--formally-border-darkDark colour variation of borderblack
--formally-slider-track-bgRange slider background colour#e4caff
--formally-slider-track-heightRange slider track height0.5rem
--formally-slider-track-border-radiusRange slider track radius0.5rem
--formally-slider-margin-topRange slider margin top1.5625rem
--formally-slider-thumb-size-pixelsRange slider thumb (dragable widget) size (width/height)2.75rem
--formally-slider-thumb-margin-topRange slider thumb (dragable widget) margin top-1.1875rem
--formally-slider-thumb-bgRange slider thumb background colour#fff
--formally-slider-thumb-border-colorRange slider thumb border colourvar(--formally-color-brand)
--formally-slider-thumb-border-widthRange slider thumb border width0.75rem
--formally-slider-thumb-borderRange slider thumb border (shorthand style)var(--formally-slider-thumb-border-width) solid var(--formally-slider-thumb-border-color)
--formally-color-slider-unsetRange slider colour when unselected / without value#999
--formally-xs-button-group-flex-directionButton group alignment.column
--formally-md-button-group-flex-directionButton group alignment.row
--formally-autosuggestion-list-heightAuto suggest items list height400px
--formally-autosuggestion-icon-colorAuto suggest icon colourvar(--formally-color-brand)
--formally-autosuggestion-selected-list-item-border-colorAuto suggest list item border colourvar(--formally-color-brand)
--formally-autosuggestion-selected-list-item-text-colorAuto suggest selected list item text colourvar(--formally-color-content)
--formally-autosuggestion-selected-list-item-hover-colorAuto suggest selected list item hover colourvar(--formally-color-brand-light)
--formally-button-border-color-primaryPrimary Button border colour. Primary buttons are usually 'Next' or 'Submit' buttons, but not 'Previous'.var(--formally-color-brand)
--formally-button-text-color-primaryPrimary Button text colour. Primary buttons are usually 'Next' or 'Submit' buttons, but not 'Previous'.#ffffff
--formally-button-bg-color-primaryPrimary Button background colour. Primary buttons are usually 'Next' or 'Submit' buttons, but not 'Previous'.var(--formally-color-brand)
--formally-button-bg-color-primary-darkPrimary Button background colour dark variation. Primary buttons are usually 'Next' or 'Submit' buttons, but not 'Previous'.var(--formally-color-brand-dark)
--formally-button-bg-color-primary-darkerPrimary Button background colour darker variation. Primary buttons are usually 'Next' or 'Submit' buttons, but not 'Previous'.var(--formally-color-brand-darker)
--formally-button-border-color-secondarySecondary Button border colour. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons.var(--formally-color-brand)
--formally-button-text-color-secondarySecondary Button text colour. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons.var(--formally-color-brand)
--formally-button-bg-color-secondarySecondary Button background colour. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons.#ffffff
--formally-button-bg-color-secondary-darkSecondary Button background colour dark variation. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons.#6500ff1a
--formally-button-bg-color-secondary-darkerSecondary Button background colour darker variation. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons.#6500ff33
--formally-choice-bg-colorMultichoice (checkbox/radio) background colourwhite
--formally-choice-bg-color-selectedMultichoice (checkbox/radio) background colour of selected itemvar(--formally-color-brand)
--formally-choice-border-colorMultichoice (checkbox/radio) border colourvar(--formally-border-light)
--formally-choice-border-color-checkedMultichoice (checkbox/radio) border colour of selected itemvar(--formally-color-brand)
--formally-choice-checkbox-sizeCheckbox size (width/height)1.5rem
--formally-choice-checkbox-border-radiusCheckbox border radius4px
--formally-choice-checkbox-tick-colorCheckbox ticked colourwhite
--formally-choice-radio-sizeRadio size (width/height)1.5rem
--formally-locale-picker-border-colorLocale picker border colourwhite
--formally-page-indicator-bgPage indicator background colour. Page indicator is the (eg) 'Page 1 of 5' message at the top of multipage forms.var(--formally-color-grey-light)
--formally-page-indicator-bg-activePage indicator current page background colour. Page indicator is the (eg) 'Page 1 of 5' message at the top of multipage forms.var(--formally-color-brand)
--formally-repeater-border-colorRepeater border colour.black
--formally-repeater-title-padding-leftRepeater padding left. Used to indent repeating items.var(--formally-space-sm)
--formally-repeater-title-padding-rightRepeater padding right. Used to indent repeating items.var(--formally-space-sm)
--formally-repeater-delete-button-font-sizeRepeater delete button font size.var(--formally-font-size-larger)
--formally-input-heightText input (free text) field type height3rem
--formally-input-colorText input (free text) colourvar(--formally-color-content)
--formally-input-bgText input (free text) background colourvar(--formally-color-background)
--formally-input-select-bgInput select background colourvar(--formally-color-brand)
--formally-input-border-colorInput border colourvar(--formally-border-light)
--formally-input-border-color-focusInput border colour when in focus (when the field has been navigated to by the user)var(--formally-color-brand)
--formally-input-border-color-warningInput border colour when the field has a warning (error)var(--formally-color-warn)
--formally-input-border-size-warningInput border width when the field has a warning (error)var(--formally-error-border-width)
--formally-input-placeholder-colorInput placeholder colourvar(--formally-color-placeholder)
--formally-input-select-chevron-colorSelect field chevron color (colour)var(--formally-color-brand)
--formally-input-liveupload-status-paddingLive upload status paddingvar(--formally-space-sm)
--formally-input-liveupload-status-font-sizeLive upload status font-sizevar(--formally-font-size-smaller)
--formally-input-liveupload-status--success-borderLive upload status success border coloursolid 1px var(--formally-color-brand)
--formally-input-liveupload-status--success-colorLive upload status success text colourvar(--formally-color-brand)
--formally-input-liveupload-status--success-backgroundLive upload status success background colourvar(--formally-color-background)
--formally-input-liveupload-status--error-borderLive upload status error border coloursolid 1px var(--formally-color-warn)
--formally-input-liveupload-status--error-backgroundLive upload status error background colourvar(--formally-color-background)
--formally-input-liveupload-status--error-colorLive upload status error text colourvar(--formally-color-warn)
--formally-button-group-marginButton group (previous / next / submit buttons) margin3.125rem 0 1.5625rem 0
--formally-fieldset-borderFieldset bordersolid 1px var(--formally-border-dark)
--formally-fieldset-border-radiusFieldset border radiusvar(--formally-border-radius)
--formally-fieldset-paddingFieldset padding0 var(--formally-field-padding-horizontal) var(--formally-field-padding-vertical) var(--formally-field-padding-horizontal)
--formally-fieldset-legend-paddingFieldset legend paddingvar(--formally-field-padding-vertical) var(--formally-field-padding-horizontal)

Would you like to style something not mentioned here? Please let us know.

Entirely Custom CSS

From a technical standpoint Formally's CSS is optional and as such developers may ignore it and instead use their own CSS.

However this isn't recommended as it will incur a significant development effort to start with, and an ongoing maintenance burden when upgrading to newer versions of Formally.

Instead please consider whether changes to Formally (such as new CSS Variables) could suffice, and please suggest CSS Variables.

If despite these warnings you choose this approach 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.

We do not support or recommend this approach.