Theming

Customize the visual appearance of your Forms.md forms with themes, colors, and styles

Forms.md provides extensive theming capabilities to match your brand identity. Customize colors, backgrounds, fonts, and more through the Formsmd class options.

Color scheme

Forms.md supports both light and dark modes with automatic persistence.

Setting the default scheme

const form = new Formsmd(
  template,
  document.body,
  {
    colorScheme: "dark" // "light" or "dark"
  }
);

The default color scheme is "light" if not specified.

Color scheme toggle

Enable a toggle button in the footer for users to switch between light and dark modes:

1. Configure toggle in template

   #! color-scheme-toggle = show
   
2. Set color scheme scope

   Choose between domain-wide or page-specific preference:

   #! color-scheme-scope = domain-wide
   

   Options:

   • domain-wide - Preference applies to all forms on the domain (default)
   • isolate - Preference is saved only for the specific page

Theme configuration

Define custom colors for both light and dark modes through the themeLight and themeDark options.

Basic theme setup

const form = new Formsmd(
  template,
  document.body,
  {
    themeLight: {
      accent: "rgb(30, 55, 153)",
      accentForeground: "rgb(255, 255, 255)",
      backgroundColor: "rgb(255, 255, 255)",
      color: "rgb(0, 0, 0)"
    },
    themeDark: {
      accent: "rgb(138, 180, 248)",
      accentForeground: "rgb(0, 0, 0)",
      backgroundColor: "rgb(20, 20, 20)",
      color: "rgb(240, 240, 240)"
    }
  }
);

Theme properties

Property	Description	Examples
accent	Primary brand color used for buttons, focused inputs, and interactive elements	"#1E3799", "rgb(30, 55, 153)", "blue"
accentForeground	Text color on accent backgrounds (e.g., button text)	"#FFFFFF", "rgb(255, 255, 255)", "white"
backgroundColor	Main page background color	"#FFFFFF", "rgb(255, 255, 255)"
color	Primary text color	"#000000", "rgb(0, 0, 0)", "black"

All color properties accept HTML color names, hex codes, or RGB values.

Template-based theming

You can also configure themes directly in your Markdown template using settings.

Dual-value support

Many settings support two values separated by || for light and dark modes:

#! accent = rgb(30, 55, 153) || rgb(138, 180, 248)
#! accent-foreground = rgb(255, 255, 255) || rgb(0, 0, 0)
#! background-color = rgb(255, 255, 255) || rgb(20, 20, 20)
#! color = rgb(0, 0, 0) || rgb(240, 240, 240)

The first value applies to light mode, the second to dark mode.

Background images

#! background-image = url('/images/light-bg.jpg') || url('/images/dark-bg.jpg')
#! backdrop-opacity = 0.7 || 0.8

Advanced styling

Custom fonts

Font family

#! font-family = 'Inter', -apple-system, BlinkMacSystemFont, sans-serif

Font size accepts "sm" for smaller text or "lg" for larger text.

Form field appearance

Modern (default)

Modern style with rounded corners and subtle shadows:

#! form-style = modern
#! rounded = pill

Classic

Traditional form appearance:

#! form-style = classic
#! rounded = none

Field sizing

#! field-size = sm
#! label-style = classic

Setting	Options	Description
field-size	"sm"	Makes all form fields smaller
label-style	"classic"	Makes questions and descriptions smaller

Branding

Logo

Add your brand logo to the header:

#! brand = ![Company Logo](/images/logo.png) || ![Company Logo](/images/logo-dark.png)

Use Markdown image syntax. Dual values allow different logos for light/dark modes.

Call to action button

Add a CTA button in the header:

#! cta = [Get Started](/signup)

Hide Forms.md branding

#! formsmd-branding = hide

Or control it programmatically:

const form = new Formsmd(
  template,
  document.body,
  {
    formsmdBranding: "hide"
  }
);

Layout configuration

Header and footer

#! header = show
#! footer = show

Options for header:

• hide - Hidden
• show - Visible with default positioning
• align - Visible and aligned with content

When hiding the footer, users won’t see navigation controls. Consider using inline slide controls.

Vertical alignment

#! vertical-alignment = start

By default, content is vertically centered. Set to "start" to align content to the top.

Button alignment

#! button-alignment = end

Options:

• center - Center aligned (default)
• end - Right aligned
• stretch - Full width

UI controls

Slide controls

#! slide-controls = show

Show or hide the next/previous buttons in the footer.

Page progress

#! page-progress = show

Options:

• hide - Hidden
• show - Functional progress indicator
• decorative - Visual-only progress bar

Restart button

#! restart-button = show

Allows users to restart the form from the beginning.

CSS customization

Custom CSS prefix

Change the default CSS class prefix from fmd- to your own:

#! css-prefix = my-

This changes all CSS classes from fmd-* to my-*.

Text direction

For right-to-left languages:

#! dir = rtl

Forms.md includes RTL support out of the box. Use dir="rtl" for proper right-to-left layout.

Rounded corners

#! rounded = pill

Options:

• none - No rounded corners
• Default (not set) - Standard rounded corners
• pill - Fully rounded (pill-shaped) corners

Complete example

Here’s a comprehensive theming configuration:

#! title = Brand Survey
#! color-scheme = light
#! color-scheme-toggle = show
#! color-scheme-scope = domain-wide

#! accent = #6366f1 || #818cf8
#! accent-foreground = #ffffff || #000000
#! background-color = #ffffff || #1f2937
#! color = #1f2937 || #f9fafb
#! background-image = url('/bg-light.jpg') || url('/bg-dark.jpg')
#! backdrop-opacity = 0.8 || 0.9

#! brand = ![Logo](/logo.svg) || ![Logo](/logo-dark.svg)
#! cta = [Sign Up](/signup)

#! font-family = 'Inter', sans-serif
#! font-import-url = @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
#! font-size = default

#! form-style = modern
#! field-size = default
#! label-style = default
#! rounded = pill

#! header = show
#! footer = show
#! button-alignment = center
#! vertical-alignment = center
#! page-progress = show
#! slide-controls = show
#! formsmd-branding = hide

Next steps

Form inputs

Explore all available input types

Localization

Add multi-language support