# Theming

## Set up custom themes

Set the `themeLight` and `themeDark` [options](https://docs.forms.md/getting-started/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.

```javascript
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();
```

<div><figure><img src="https://824814026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRq8uKg8VhNAvWTRL52uz%2Fuploads%2FkM75lMPI0Rw5eNsydDkZ%2Ftheming-light-mode.png?alt=media&#x26;token=eecdf44b-2894-4e2f-9600-358d089aec4b" alt=""><figcaption><p>Theming - light mode</p></figcaption></figure> <figure><img src="https://824814026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRq8uKg8VhNAvWTRL52uz%2Fuploads%2FjTJ6LCTBhf7TcRaZnspE%2Ftheming-dark-mode.png?alt=media&#x26;token=5331fa28-15af-4b32-a471-e2954aa19af0" alt=""><figcaption><p>Theming - dark mode</p></figcaption></figure></div>

***

## The `themeLight` and `themeDark` options

{% hint style="info" %}
The colors must be HTML names, hex codes, or RGB values.
{% endhint %}

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](https://docs.forms.md/getting-started/options), 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.

```javascript
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](https://www.gethalfmoon.com/) website:

```javascript
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);
  });
}
```