Theming

Customize your forms to perfectly match your brand.

Set up custom themes

Set the themeLight and themeDark options during instantiation to create custom themes that perfectly match your brand. The options correspond to the theme used for light mode or dark mode.

import { Composer, Formsmd } from "formsmd";

const composer = new Composer({
  id: "my-form"
});

composer.opinionScale("nps", {
  question: "How likely are you to recommend our product to a friend or colleague?",
  required: true
});

// Set the themes during instantiation
const formsmd = new Formsmd(
  composer.template,
  document.getElementById("my-form-container"),
  {
    themeLight: {
      accent: "#353148",
      accentForeground: "#e2d2b6",
      backgroundColor: "#e2d2b6",
      color: "#353148"
    },
    themeDark: {
      accent: "#e2d2b6",
      accentForeground: "#353148",
      backgroundColor: "#353148",
      color: "#e2d2b6"
    }
  }
);
formsmd.init();

Theming - light mode

Theming - dark mode

---

The themeLight and themeDark options

The colors must be HTML names, hex codes, or RGB values.

Both the theme options have the following parameters:

Name	Type	Description
accent	string	The primary color used on buttons, form fields, etc.
accentForeground	string	The text color used on accent background, for example, the text on buttons.
backgroundColor	string	The background-color of the page.
color	string	The color of the text on the page.

---

Light and dark modes

The color scheme is set using the colorScheme option, which is set to "light" by default. Of course, this can be changed during instantiation. For example, the form below would start off in dark mode.

const formsmd = new Formsmd(
  composer.template,
  document.getElementById("my-form-container"),
  {
    colorScheme: "dark"
  }
);
formsmd.init();

Toggle

If you have a toggle on your website that lets users select light mode or dark mode (or system), you will need to dynamically update the color scheme of the forms when the user changes their preference. This is easy to do because the color scheme is handled using the data-fmd-color-scheme attribute on the .fmd-root container:

• For light mode, the data-fmd-color-scheme has the "light" value.

• For dark mode, the data-fmd-color-scheme has the "dark" value.

For example, here's a snippet the handles dynamic color schemes on a Bootstrap/Halfmoon website:

function toggleColorScheme() {
  const colorSchemeToSet =
    document.documentElement.getAttribute("data-bs-theme") === "light"
      ? "dark"
      : "light";
  document.documentElement.setAttribute("data-bs-theme", colorSchemeToSet);
  setCookie("halfmoon:color-scheme", colorSchemeToSet, 365);
    
  // Set color scheme of all Forms.md root elements
  document.querySelectorAll(".fmd-root").forEach((div) => {
    div.setAttribute("data-fmd-color-scheme", colorSchemeToSet);
  });
}