Dark Mode

General

The form supports two color modes: light and dark. Each mode has its own independently configured palette and uses the same set of color options. This page describes the dark palette and the settings that control color mode behavior.

Dark Palette

The dark palette uses the same color options as the light palette, including primary, text, background, panel, and divider colors. Each can be configured independently for dark mode.

Default Mode

You can define whether the form initially opens in light or dark mode.

Note: If no default mode is specified, the form automatically uses the end user's system preference.

Mode Toggle

You can display a toggle that allows users to switch between light and dark mode directly within the form.

Note: If the toggle is hidden, the form remains in the configured default mode. If no default mode is specified, it uses the mode detected from the end user's system preference.

The color mode can also be controlled externally from your application. This allows you to synchronize the form with the appearance setting users have already selected in your product.

Technical Setup

Configure the dark palette under theme.palette.dark in the profile. Color mode behavior is configured under functionality.colorMode.

All fields are optional. If a field is not specified, the finAPI default value is used.

Dark Palette Fields

All paths below are relative to theme.palette.dark. The structure is identical to theme.palette.light.

Mode Behavior Fields

Example

{
  "functionality": {
    "colorMode": {
      "initial": "DARK",
      "toggler": "RENDER"
    }
  },
  "theme": {
    "base": "DEFAULT_V2_1",
    "palette": {
      "dark": {
        "primary": {
          "main": "#5A9FF0"
        },
        "text": {
          "primary": "#FFFFFF",
          "secondary": "#AAAAAA"
        },
        "background": {
          "default": "#121212",
          "paper": "#1E1E1E"
        },
        "divider": "#333333"
      }
    }
  }
}