Live theme creator

No hex-code guessing. This page embeds a real chart + ChartUI and lets you drag colors, switch light/dark, and copy the exact code into your app.

Start from a preset

Theme direction

Each preset seeds both the chart runtime palette and the React UI chrome. After that, tweak the chart and UI sections independently.

Preview and code variant

Chart Runtime

Chart-surface colors

These tokens style the chart itself: candles, axes, grid, crosshair, and default drawing-tool colors.

Chart backgroundCanvas and axis background behind candles and indicators.

Axis textPrice-axis and time-axis label color.

GridHorizontal and vertical grid lines inside the chart panel.

Chart accentSelection handles, marker accents, and other highlighted runtime details.

Up candleBullish candles and buy-oriented runtime markers.

Down candleBearish candles and sell-oriented runtime markers.

CrosshairCrosshair line and its outer label treatment.

Tool defaultDefault drawing-tool stroke and text color when a tool has no custom color.

React UI

Toolbar and menu colors

These tokens style the embedded React UI layer: toolbar, left menu, dialogs, inputs, borders, and control surfaces.

Toolbar backgroundTop toolbar chrome behind draw-mode, indicators, and interval controls.

Dialog panelDialog and content-surface background used by menus and overlays.

Submenu surfaceStronger panel surface for left menu and open split buttons.

UI accentPrimary UI accent for highlights, scrollbar hover, and active surfaces.

UI textPrimary text for toolbar, menus, and dialogs.

Muted UI textSecondary text and lower-emphasis labels in UI chrome.

DividerBorders, separators, and scrollbar thumb base color.

Live preview

Chart + React UI embedded

dark variantBTC/USD fixture

Loading preview UI…

Copy code

Generated theme objects

Chart runtime theme

Pass this into createChart({ theme, themeVariant }) to switch between the light and dark variants.

const runtimeTheme = {
  "colors": {
    "accent": {
      "dark": "#00C8C8",
      "light": "#04adb2"
    },
    "primaryTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "disabledTextColor": {
      "dark": "rgba(255, 255, 255, 0.52)",
      "light": "rgba(8, 17, 27, 0.42)"
    },
    "handlerColor": {
      "dark": "rgba(207, 216, 220, 0.16)",
      "light": "rgba(81, 95, 112, 0.12)"
    },
    "iconColor": {
      "dark": "#00C8C8",
      "light": "#08111B"
    },
    "backgroundColor": {
      "dark": "#0B0C10",
      "light": "#ebeef1"
    },
    "timeAxisBackground": {
      "dark": "#0B0C10",
      "light": "#ebeef1"
    },
    "priceAxisBackground": {
      "dark": "#0B0C10",
      "light": "#ebeef1"
    },
    "timeAxisTextColor": {
      "dark": "#CFD8DC",
      "light": "#515f70"
    },
    "priceAxisTextColor": {
      "dark": "#CFD8DC",
      "light": "#515f70"
    },
    "gridColor": {
      "dark": "#171E21",
      "light": "#d5d7d7"
    },
    "chartZeroColor": {
      "dark": "#00C8C8",
      "light": "#04adb2"
    },
    "chartRed": {
      "dark": "#DC0464",
      "light": "#d1075d"
    },
    "chartGreen": {
      "dark": "#00C8C8",
      "light": "#02b5b0"
    },
    "chartGreenBackground": {
      "dark": "#048c8d",
      "light": "#43c5c2"
    },
    "chartGray": {
      "dark": "#777c80",
      "light": "#a1a9b3"
    },
    "chartGrayPrimary": {
      "dark": "#989fa3",
      "light": "#8c95a1"
    },
    "chartRedStroke": {
      "dark": "#DC0464",
      "light": "#f9d2e3"
    },
    "chartGreenStroke": {
      "dark": "#00C8C8",
      "light": "#d1f5f5"
    },
    "chartFill": {
      "dark": "rgba(0, 200, 200, 0.22)",
      "light": "rgba(4, 173, 178, 0.14)"
    },
    "chartStroke": {
      "dark": "#00C8C8",
      "light": "#04adb2"
    },
    "buyColor": {
      "dark": "#00C8C8",
      "light": "#02b5b0"
    },
    "sellColor": {
      "dark": "#DC0464",
      "light": "#d1075d"
    },
    "exitAllColor": {
      "dark": "#777c80",
      "light": "#a1a9b3"
    },
    "defaultToolColor": {
      "dark": "#00C8C8",
      "light": "#22818d"
    },
    "defaultToolTextColor": {
      "dark": "#FFFFFF",
      "light": "#FFFFFF"
    },
    "crosshairColor": {
      "dark": "#00C8C8",
      "light": "#14929a"
    },
    "crosshairTextColor": {
      "dark": "#FFFFFF",
      "light": "#FFFFFF"
    },
    "crosshairInnerColor": {
      "dark": "#0B0C10",
      "light": "#ebeef1"
    },
    "crosshairInnerTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "tipBackground": {
      "dark": "#092e31",
      "light": "#d6e5e8"
    },
    "tipTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "tipUnderline": {
      "dark": "rgba(255, 255, 255, 0.12)",
      "light": "rgba(8, 17, 27, 0.12)"
    },
    "indicatorMarker": {
      "dark": "#151a1e",
      "light": "#dcdedf"
    },
    "hitColor": {
      "dark": "rgba(255, 255, 255, 0.72)",
      "light": "rgba(8, 17, 27, 0.54)"
    },
    "darkTextColor": {
      "dark": "#08111B",
      "light": "#08111B"
    },
    "overlay": {
      "dark": "#777c80",
      "light": "#a1a9b3"
    },
    "legendLabelColor": {
      "dark": "rgba(255, 255, 255, 0.72)",
      "light": "rgba(8, 17, 27, 0.62)"
    },
    "legendValueColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "legendLineBackground": {
      "dark": "transparent",
      "light": "transparent"
    },
    "fibonacciRetracementLine": {
      "dark": "rgba(255, 255, 255, 0.12)",
      "light": "rgba(8, 17, 27, 0.08)"
    }
  },
  "fonts": {
    "title": {
      "dark": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "text": {
      "dark": "11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "price": {
      "dark": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "priceSubscript": {
      "dark": "600 10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "time": {
      "dark": "600 11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "legend": {
      "dark": "12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "legendSubscript": {
      "dark": "10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "fontName": {
      "dark": "Inter",
      "light": "Inter"
    }
  }
};

React UI themes

Pick uiThemes[themeVariant] and pass that active entry into the ChartUI theme prop.

const uiThemes = {
  "dark": {
    "surroundBackground": "#101218",
    "gap": 8,
    "accentColor": "#00C8C8",
    "border": {
      "inner": "1px solid #37474F",
      "radius": 8
    },
    "buttons": {
      "color": "#546E7A",
      "activeColor": "#FFFFFF",
      "hoverColor": "#CFD8DC",
      "hoverBackground": "rgba(255, 255, 255, 0.12)",
      "activeBackground": "#181B22"
    },
    "radioButton": {
      "background": "rgba(255, 255, 255, 0.06)",
      "buttons": {
        "color": "#546E7A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CFD8DC",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#181B22"
      }
    },
    "toolbar": {
      "background": "#101218",
      "buttons": {
        "color": "#546E7A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CFD8DC",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#181B22"
      },
      "topMenuPosition": "right",
      "showCurrency": false
    },
    "subMenu": {
      "background": "#12141A",
      "buttons": {
        "color": "#546E7A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CFD8DC",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#181B22"
      }
    },
    "splitButton": {
      "openBackground": "#12141A",
      "hoverBackground": "#12141A",
      "openColor": "#CFD8DC",
      "hoverColor": "#CFD8DC",
      "arrowHoverBackground": "rgba(255, 255, 255, 0.08)",
      "arrowColor": "#546E7A",
      "arrowOpenColor": "#CFD8DC"
    },
    "dialog": {
      "backgroundColor": "#12141A",
      "titleColor": "#CFD8DC",
      "textColor": "#CFD8DC",
      "dividerColor": "rgba(255, 255, 255, 0.12)",
      "itemTitleColor": "#CFD8DC",
      "itemSubTitleColor": "#546E7A",
      "itemHoverBackgroundColor": "rgba(255, 255, 255, 0.08)"
    },
    "inputs": {
      "backgroundColor": "#181B22",
      "textColor": "#CFD8DC",
      "labelColor": "#CFD8DC",
      "placeholderColor": "#546E7A"
    },
    "scrollBar": {
      "trackColor": "rgba(255, 255, 255, 0.08)",
      "thumbColor": "rgba(255, 255, 255, 0.22)",
      "thumbHoverColor": "rgba(255, 255, 255, 0.34)"
    }
  },
  "light": {
    "surroundBackground": "#ebeef2",
    "gap": 8,
    "accentColor": "#04b0b4",
    "border": {
      "inner": "1px solid #E0E3EB",
      "radius": 8
    },
    "buttons": {
      "color": "#5D718B",
      "activeColor": "#04b0b4",
      "hoverColor": "#162133",
      "hoverBackground": "rgba(19, 23, 34, 0.06)",
      "activeBackground": "rgba(4, 176, 180, 0.14)"
    },
    "radioButton": {
      "background": "rgba(19, 23, 34, 0.05)",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#04b0b4",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(4, 176, 180, 0.14)"
      }
    },
    "toolbar": {
      "background": "#ebeef2",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#04b0b4",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(4, 176, 180, 0.14)"
      },
      "topMenuPosition": "right",
      "showCurrency": false
    },
    "subMenu": {
      "background": "#eeefef",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#04b0b4",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(4, 176, 180, 0.14)"
      }
    },
    "splitButton": {
      "openBackground": "#eeefef",
      "hoverBackground": "#eeefef",
      "openColor": "#162133",
      "hoverColor": "#162133",
      "arrowHoverBackground": "rgba(19, 23, 34, 0.06)",
      "arrowColor": "#5D718B",
      "arrowOpenColor": "#162133"
    },
    "dialog": {
      "backgroundColor": "#eeefef",
      "titleColor": "#162133",
      "textColor": "#162133",
      "dividerColor": "rgba(19, 23, 34, 0.12)",
      "itemTitleColor": "#162133",
      "itemSubTitleColor": "#5D718B",
      "itemHoverBackgroundColor": "rgba(19, 23, 34, 0.06)"
    },
    "inputs": {
      "backgroundColor": "#e3e4e4",
      "textColor": "#162133",
      "labelColor": "#162133",
      "placeholderColor": "#5D718B"
    },
    "scrollBar": {
      "trackColor": "rgba(19, 23, 34, 0.06)",
      "thumbColor": "rgba(19, 23, 34, 0.18)",
      "thumbHoverColor": "rgba(19, 23, 34, 0.32)"
    }
  }
};

Apply snippet

Copy the full example when you want the runtime theme and the React UI wrapper wired together.

import { createChart } from "@efixdata/exeria-chart";
import { ChartUI } from "@efixdata/exeria-chart-ui-react";

const runtimeTheme = {
  "colors": {
    "accent": {
      "dark": "#00C8C8",
      "light": "#04adb2"
    },
    "primaryTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "disabledTextColor": {
      "dark": "rgba(255, 255, 255, 0.52)",
      "light": "rgba(8, 17, 27, 0.42)"
    },
    "handlerColor": {
      "dark": "rgba(207, 216, 220, 0.16)",
      "light": "rgba(81, 95, 112, 0.12)"
    },
    "iconColor": {
      "dark": "#00C8C8",
      "light": "#08111B"
    },
    "backgroundColor": {
      "dark": "#0B0C10",
      "light": "#ebeef1"
    },
    "timeAxisBackground": {
      "dark": "#0B0C10",
      "light": "#ebeef1"
    },
    "priceAxisBackground": {
      "dark": "#0B0C10",
      "light": "#ebeef1"
    },
    "timeAxisTextColor": {
      "dark": "#CFD8DC",
      "light": "#515f70"
    },
    "priceAxisTextColor": {
      "dark": "#CFD8DC",
      "light": "#515f70"
    },
    "gridColor": {
      "dark": "#171E21",
      "light": "#d5d7d7"
    },
    "chartZeroColor": {
      "dark": "#00C8C8",
      "light": "#04adb2"
    },
    "chartRed": {
      "dark": "#DC0464",
      "light": "#d1075d"
    },
    "chartGreen": {
      "dark": "#00C8C8",
      "light": "#02b5b0"
    },
    "chartGreenBackground": {
      "dark": "#048c8d",
      "light": "#43c5c2"
    },
    "chartGray": {
      "dark": "#777c80",
      "light": "#a1a9b3"
    },
    "chartGrayPrimary": {
      "dark": "#989fa3",
      "light": "#8c95a1"
    },
    "chartRedStroke": {
      "dark": "#DC0464",
      "light": "#f9d2e3"
    },
    "chartGreenStroke": {
      "dark": "#00C8C8",
      "light": "#d1f5f5"
    },
    "chartFill": {
      "dark": "rgba(0, 200, 200, 0.22)",
      "light": "rgba(4, 173, 178, 0.14)"
    },
    "chartStroke": {
      "dark": "#00C8C8",
      "light": "#04adb2"
    },
    "buyColor": {
      "dark": "#00C8C8",
      "light": "#02b5b0"
    },
    "sellColor": {
      "dark": "#DC0464",
      "light": "#d1075d"
    },
    "exitAllColor": {
      "dark": "#777c80",
      "light": "#a1a9b3"
    },
    "defaultToolColor": {
      "dark": "#00C8C8",
      "light": "#22818d"
    },
    "defaultToolTextColor": {
      "dark": "#FFFFFF",
      "light": "#FFFFFF"
    },
    "crosshairColor": {
      "dark": "#00C8C8",
      "light": "#14929a"
    },
    "crosshairTextColor": {
      "dark": "#FFFFFF",
      "light": "#FFFFFF"
    },
    "crosshairInnerColor": {
      "dark": "#0B0C10",
      "light": "#ebeef1"
    },
    "crosshairInnerTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "tipBackground": {
      "dark": "#092e31",
      "light": "#d6e5e8"
    },
    "tipTextColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "tipUnderline": {
      "dark": "rgba(255, 255, 255, 0.12)",
      "light": "rgba(8, 17, 27, 0.12)"
    },
    "indicatorMarker": {
      "dark": "#151a1e",
      "light": "#dcdedf"
    },
    "hitColor": {
      "dark": "rgba(255, 255, 255, 0.72)",
      "light": "rgba(8, 17, 27, 0.54)"
    },
    "darkTextColor": {
      "dark": "#08111B",
      "light": "#08111B"
    },
    "overlay": {
      "dark": "#777c80",
      "light": "#a1a9b3"
    },
    "legendLabelColor": {
      "dark": "rgba(255, 255, 255, 0.72)",
      "light": "rgba(8, 17, 27, 0.62)"
    },
    "legendValueColor": {
      "dark": "#FFFFFF",
      "light": "#08111B"
    },
    "legendLineBackground": {
      "dark": "transparent",
      "light": "transparent"
    },
    "fibonacciRetracementLine": {
      "dark": "rgba(255, 255, 255, 0.12)",
      "light": "rgba(8, 17, 27, 0.08)"
    }
  },
  "fonts": {
    "title": {
      "dark": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "text": {
      "dark": "11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "price": {
      "dark": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "priceSubscript": {
      "dark": "600 10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "time": {
      "dark": "600 11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "600 11px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "legend": {
      "dark": "12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "12px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "legendSubscript": {
      "dark": "10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "light": "10px Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "fontName": {
      "dark": "Inter",
      "light": "Inter"
    }
  }
};

const uiThemes = {
  "dark": {
    "surroundBackground": "#101218",
    "gap": 8,
    "accentColor": "#00C8C8",
    "border": {
      "inner": "1px solid #37474F",
      "radius": 8
    },
    "buttons": {
      "color": "#546E7A",
      "activeColor": "#FFFFFF",
      "hoverColor": "#CFD8DC",
      "hoverBackground": "rgba(255, 255, 255, 0.12)",
      "activeBackground": "#181B22"
    },
    "radioButton": {
      "background": "rgba(255, 255, 255, 0.06)",
      "buttons": {
        "color": "#546E7A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CFD8DC",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#181B22"
      }
    },
    "toolbar": {
      "background": "#101218",
      "buttons": {
        "color": "#546E7A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CFD8DC",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#181B22"
      },
      "topMenuPosition": "right",
      "showCurrency": false
    },
    "subMenu": {
      "background": "#12141A",
      "buttons": {
        "color": "#546E7A",
        "activeColor": "#FFFFFF",
        "hoverColor": "#CFD8DC",
        "hoverBackground": "rgba(255, 255, 255, 0.12)",
        "activeBackground": "#181B22"
      }
    },
    "splitButton": {
      "openBackground": "#12141A",
      "hoverBackground": "#12141A",
      "openColor": "#CFD8DC",
      "hoverColor": "#CFD8DC",
      "arrowHoverBackground": "rgba(255, 255, 255, 0.08)",
      "arrowColor": "#546E7A",
      "arrowOpenColor": "#CFD8DC"
    },
    "dialog": {
      "backgroundColor": "#12141A",
      "titleColor": "#CFD8DC",
      "textColor": "#CFD8DC",
      "dividerColor": "rgba(255, 255, 255, 0.12)",
      "itemTitleColor": "#CFD8DC",
      "itemSubTitleColor": "#546E7A",
      "itemHoverBackgroundColor": "rgba(255, 255, 255, 0.08)"
    },
    "inputs": {
      "backgroundColor": "#181B22",
      "textColor": "#CFD8DC",
      "labelColor": "#CFD8DC",
      "placeholderColor": "#546E7A"
    },
    "scrollBar": {
      "trackColor": "rgba(255, 255, 255, 0.08)",
      "thumbColor": "rgba(255, 255, 255, 0.22)",
      "thumbHoverColor": "rgba(255, 255, 255, 0.34)"
    }
  },
  "light": {
    "surroundBackground": "#ebeef2",
    "gap": 8,
    "accentColor": "#04b0b4",
    "border": {
      "inner": "1px solid #E0E3EB",
      "radius": 8
    },
    "buttons": {
      "color": "#5D718B",
      "activeColor": "#04b0b4",
      "hoverColor": "#162133",
      "hoverBackground": "rgba(19, 23, 34, 0.06)",
      "activeBackground": "rgba(4, 176, 180, 0.14)"
    },
    "radioButton": {
      "background": "rgba(19, 23, 34, 0.05)",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#04b0b4",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(4, 176, 180, 0.14)"
      }
    },
    "toolbar": {
      "background": "#ebeef2",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#04b0b4",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(4, 176, 180, 0.14)"
      },
      "topMenuPosition": "right",
      "showCurrency": false
    },
    "subMenu": {
      "background": "#eeefef",
      "buttons": {
        "color": "#5D718B",
        "activeColor": "#04b0b4",
        "hoverColor": "#162133",
        "hoverBackground": "rgba(19, 23, 34, 0.06)",
        "activeBackground": "rgba(4, 176, 180, 0.14)"
      }
    },
    "splitButton": {
      "openBackground": "#eeefef",
      "hoverBackground": "#eeefef",
      "openColor": "#162133",
      "hoverColor": "#162133",
      "arrowHoverBackground": "rgba(19, 23, 34, 0.06)",
      "arrowColor": "#5D718B",
      "arrowOpenColor": "#162133"
    },
    "dialog": {
      "backgroundColor": "#eeefef",
      "titleColor": "#162133",
      "textColor": "#162133",
      "dividerColor": "rgba(19, 23, 34, 0.12)",
      "itemTitleColor": "#162133",
      "itemSubTitleColor": "#5D718B",
      "itemHoverBackgroundColor": "rgba(19, 23, 34, 0.06)"
    },
    "inputs": {
      "backgroundColor": "#e3e4e4",
      "textColor": "#162133",
      "labelColor": "#162133",
      "placeholderColor": "#5D718B"
    },
    "scrollBar": {
      "trackColor": "rgba(19, 23, 34, 0.06)",
      "thumbColor": "rgba(19, 23, 34, 0.18)",
      "thumbHoverColor": "rgba(19, 23, 34, 0.32)"
    }
  }
};

const themeVariant = "dark";
const uiTheme = uiThemes[themeVariant];

const interval = {
  "symbol": "1h",
  "milis": 3600000
};

const chart = createChart({
  container,
  instrument,
  theme: runtimeTheme,
  themeVariant,
});

chart.init();
await chart.setMainSeriesData(candles, interval);

<ChartUI chart={chart} theme={uiTheme}>
  <div ref={containerRef} />
</ChartUI>;

Before you start

Remember the two layers (Overview):

Section in the creator	Goes into
Chart colors	createChart({ theme: runtimeTheme, themeVariant })
UI colors	<ChartUI theme={uiThemes[themeVariant]} />

The preview shows both together so you see the full product surface.

How to use it (step by step)

1. Pick a preset close to your brand (Trading Dark, Day, Midnight, …).
2. Toggle Dark / Light — each variant has its own palette.
3. Adjust chart sliders: background, grid, candles, crosshair, …
4. Adjust UI sliders: toolbar, dialogs, text, accent.
5. Watch the live preview update.
6. Copy one of the generated blocks:
   • runtimeTheme only (vanilla / custom React shell)
   • uiThemes only (chrome refresh)
   • Full apply snippet (createChart + ChartUI together)

What each chart color controls

Control	Effect
Chart background	Plot + axis backdrop
Axis text	Price and time labels
Grid	Grid lines
Chart accent	Highlights, handles, markers
Up / down candle	Bullish / bearish bodies
Crosshair	Crosshair line treatment
Tool default	Default drawing stroke color

What each UI color controls

Control	Effect
Toolbar background	Top bar behind interval / indicators
Dialog panel	Settings and picker surfaces
Submenu surface	Left menu and open dropdowns
UI accent	Active states, scrollbar hover
UI text / muted text	Labels in toolbar and dialogs
Divider	Borders and separators

Apply the generated code

The full snippet follows this pattern:

const chart = createChart({
  container,
  theme: runtimeTheme,
  themeVariant: "dark",
});

<ChartUI chart={chart} theme={uiThemes.dark}>
  <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
</ChartUI>

runtimeTheme includes both light and dark keys. Switch at runtime:

chart.applyChartTheme(runtimeTheme, nextVariant);

<ChartUI theme={uiThemes[nextVariant]} … />

Core-only apps (no ChartUI)

Copy the runtime theme block and skip ChartUI. Your own HTML toolbar keeps its own CSS.

Same presets as Chart settings

The six presets match Chart settings → Theme templates in ChartUI. Users can fine-tune in the dialog; you can ship the same baseline from code.

What is next?

• Theming overview — mental model
• Custom theme tutorial
• Save and restore settings — persist user picks
• Fintech integration starter — branded chart in context