# Theming

## Set up custom themes

Set the `themeLight` and `themeDark` [options](/getting-started/options.md) 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="/files/pNIDloX7k6abEZ4hQM3Q" alt=""><figcaption><p>Theming - light mode</p></figcaption></figure> <figure><img src="/files/JsjuWWK6pal3MxnLUcFm" 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](/getting-started/options.md), 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);
  });
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.forms.md/customization/theming.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.