Theming







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) | About | Default value |
---|---|---|
--formally-node-gap | Vertical distance between Formally nodes (fields) | 1.75rem |
--formally-field-padding-vertical | Form field padding (vertical) | 0.75rem |
--formally-field-padding-horizontal | Form field padding (horizontal) | 1rem |
--formally-space-xs | Spacing unit XS (extra small) | 0.5rem |
--formally-space-sm | Spacing unit SM (small) | 0.75rem |
--formally-space-md | Spacing unit MD (medium size) | 1rem |
--formally-space-lg | Spacing unit LG (large) | 1.25rem |
--formally-space-xl | Spacing unit XL (extra large) | 2rem |
--formally-color-brand-lighter | Colour variable for lighter brand colour | rgba(101, 0, 255, 0.1) |
--formally-color-brand-light | Colour variable for light brand colour | rgba(101, 0, 255, 0.2) |
--formally-color-brand | Colour variable for brand colour | #6100ff |
--formally-color-brand-dark | Colour variable for dark brand colour | #5000c9 |
--formally-color-brand-darker | Colour variable for darker brand colour | #430099 |
--formally-color-grey | Colour 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-light | Colour 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-content | Colour variable for content. | #000 |
--formally-color-background | Colour variable for background. | #fff |
--formally-color-placeholder | Colour variable for placeholder text. Accessibility-wise placeholder text may be confused for an actual response, so placeholder text isn't recommended. | #595959 |
--formally-color-warn | Colour variable for warning (error) messages | #b5031f |
--formally-focus-color | Colour variable for field focus ring | var(--formally-color-brand) |
--formally-color-hint | Colour variable for hint text | var(--formally-color-grey) |
--formally-label-color | Colour variable for label text | var(--formally-color-content) |
--formally-error-border-width | Thickness of error border | 2px |
--formally-border-radius | Radius of fields | 4px |
--formally-text-border-radius | Radius of text fields (FreeText) | 4px |
--formally-select-border-radius | Radius of dropdown (Select) | 4px |
--formally-button-radius | Radius of buttons | 6px |
--formally-dateinput-border-radius | Radius of date inputs | 4px |
--formally-button-padding-horizontal | Padding of buttons (horizontal) | 1.5rem |
--formally-button-padding-vertical | Padding of buttons (vertical) | 0.75rem |
--formally-input-border-width | Border thickness (width) of textural inputs (FreeText etc.) | 1px |
--formally-button-delete-width | Width of delete button within a Repeater | 2em |
--formally-button-delete-height | Height of delete button within a Repeater | 2em |
--formally-submit-pending-font-size | Font size of message that appears when submitting and waiting for a network response | 1em |
--formally-submit-pending-text-align | Text alignment of container of message that appears when submitting and waiting for a network response | right |
--formally-font-family | Default font family. | sans-serif |
--formally-font-size-smaller | Smaller font size used for less important small print | 0.875em |
--formally-font-size-larger | Larger font size used for important text | 1.125em |
--formally-max-width | Maximum width of the Formally container | 640px |
--formally-label-font-weight | Label boldness | bold |
--formally-label-font-size | Label font size | inherit |
--formally-border-light | Light colour variation of border | var(--formally-color-grey) |
--formally-border-dark | Dark colour variation of border | black |
--formally-slider-track-bg | Range slider background colour | #e4caff |
--formally-slider-track-height | Range slider track height | 0.5rem |
--formally-slider-track-border-radius | Range slider track radius | 0.5rem |
--formally-slider-margin-top | Range slider margin top | 1.5625rem |
--formally-slider-thumb-size-pixels | Range slider thumb (dragable widget) size (width/height) | 2.75rem |
--formally-slider-thumb-margin-top | Range slider thumb (dragable widget) margin top | -1.1875rem |
--formally-slider-thumb-bg | Range slider thumb background colour | #fff |
--formally-slider-thumb-border-color | Range slider thumb border colour | var(--formally-color-brand) |
--formally-slider-thumb-border-width | Range slider thumb border width | 0.75rem |
--formally-slider-thumb-border | Range slider thumb border (shorthand style) | var(--formally-slider-thumb-border-width)
solid var(--formally-slider-thumb-border-color) |
--formally-color-slider-unset | Range slider colour when unselected / without value | #999 |
--formally-xs-button-group-flex-direction | Button group alignment. | column |
--formally-md-button-group-flex-direction | Button group alignment. | row |
--formally-autosuggestion-list-height | Auto suggest items list height | 400px |
--formally-autosuggestion-icon-color | Auto suggest icon colour | var(--formally-color-brand) |
--formally-autosuggestion-selected-list-item-border-color | Auto suggest list item border colour | var(--formally-color-brand) |
--formally-autosuggestion-selected-list-item-text-color | Auto suggest selected list item text colour | var(--formally-color-content) |
--formally-autosuggestion-selected-list-item-hover-color | Auto suggest selected list item hover colour | var(--formally-color-brand-light) |
--formally-button-border-color-primary | Primary Button border colour. Primary buttons are usually 'Next' or 'Submit' buttons, but not 'Previous'. | var(--formally-color-brand) |
--formally-button-text-color-primary | Primary Button text colour. Primary buttons are usually 'Next' or 'Submit' buttons, but not 'Previous'. | #ffffff |
--formally-button-bg-color-primary | Primary Button background colour. Primary buttons are usually 'Next' or 'Submit' buttons, but not 'Previous'. | var(--formally-color-brand) |
--formally-button-bg-color-primary-dark | Primary 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-darker | Primary 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-secondary | Secondary Button border colour. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons. | var(--formally-color-brand) |
--formally-button-text-color-secondary | Secondary Button text colour. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons. | var(--formally-color-brand) |
--formally-button-bg-color-secondary | Secondary Button background colour. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons. | #ffffff |
--formally-button-bg-color-secondary-dark | Secondary Button background colour dark variation. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons. | #6500ff1a |
--formally-button-bg-color-secondary-darker | Secondary Button background colour darker variation. Secondary buttons are usually 'Previous' buttons, but not 'Next' or 'Submit' buttons. | #6500ff33 |
--formally-choice-bg-color | Multichoice (checkbox/radio) background colour | white |
--formally-choice-bg-color-selected | Multichoice (checkbox/radio) background colour of selected item | var(--formally-color-brand) |
--formally-choice-border-color | Multichoice (checkbox/radio) border colour | var(--formally-border-light) |
--formally-choice-border-color-checked | Multichoice (checkbox/radio) border colour of selected item | var(--formally-color-brand) |
--formally-choice-checkbox-size | Checkbox size (width/height) | 1.5rem |
--formally-choice-checkbox-border-radius | Checkbox border radius | 4px |
--formally-choice-checkbox-tick-color | Checkbox ticked colour | white |
--formally-choice-radio-size | Radio size (width/height) | 1.5rem |
--formally-locale-picker-border-color | Locale picker border colour | white |
--formally-page-indicator-bg | Page 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-active | Page 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-color | Repeater border colour. | black |
--formally-repeater-title-padding-left | Repeater padding left. Used to indent repeating items. | var(--formally-space-sm) |
--formally-repeater-title-padding-right | Repeater padding right. Used to indent repeating items. | var(--formally-space-sm) |
--formally-repeater-delete-button-font-size | Repeater delete button font size. | var(--formally-font-size-larger) |
--formally-input-height | Text input (free text) field type height | 3rem |
--formally-input-color | Text input (free text) colour | var(--formally-color-content) |
--formally-input-bg | Text input (free text) background colour | var(--formally-color-background) |
--formally-input-select-bg | Input select background colour | var(--formally-color-brand) |
--formally-input-border-color | Input border colour | var(--formally-border-light) |
--formally-input-border-color-focus | Input border colour when in focus (when the field has been navigated to by the user) | var(--formally-color-brand) |
--formally-input-border-color-warning | Input border colour when the field has a warning (error) | var(--formally-color-warn) |
--formally-input-border-size-warning | Input border width when the field has a warning (error) | var(--formally-error-border-width) |
--formally-input-placeholder-color | Input placeholder colour | var(--formally-color-placeholder) |
--formally-input-select-chevron-color | Select field chevron color (colour) | var(--formally-color-brand) |
--formally-input-liveupload-status-padding | Live upload status padding | var(--formally-space-sm) |
--formally-input-liveupload-status-font-size | Live upload status font-size | var(--formally-font-size-smaller) |
--formally-input-liveupload-status--success-border | Live upload status success border colour | solid 1px
var(--formally-color-brand) |
--formally-input-liveupload-status--success-color | Live upload status success text colour | var(--formally-color-brand) |
--formally-input-liveupload-status--success-background | Live upload status success background colour | var(--formally-color-background) |
--formally-input-liveupload-status--error-border | Live upload status error border colour | solid 1px
var(--formally-color-warn) |
--formally-input-liveupload-status--error-background | Live upload status error background colour | var(--formally-color-background) |
--formally-input-liveupload-status--error-color | Live upload status error text colour | var(--formally-color-warn) |
--formally-button-group-margin | Button group (previous / next / submit buttons) margin | 3.125rem 0 1.5625rem 0 |
--formally-fieldset-border | Fieldset border | solid 1px var(--formally-border-dark) |
--formally-fieldset-border-radius | Fieldset border radius | var(--formally-border-radius) |
--formally-fieldset-padding | Fieldset padding | 0 var(--formally-field-padding-horizontal)
var(--formally-field-padding-vertical)
var(--formally-field-padding-horizontal) |
--formally-fieldset-legend-padding | Fieldset legend padding | var(--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.