mmflow Charts
Themes
Pass ThemeTokens to chart embeds for white-label colors, typography, candle colors, volume colors, and crosshair styling.
React ThemeTokens
import { Chart } from "@mmflow/react";
import type { ThemeTokens } from "@mmflow/charts";
const theme: ThemeTokens = {
background: "#0b0f14",
text: "#d7e2f2",
grid: "#334155",
border: "#243244",
candleUp: "#34d399",
candleDown: "#fb7185",
volumeUp: "#34d399",
volumeDown: "#fb7185",
crosshair: "#93c5fd",
fontFamily: "Inter, ui-sans-serif, system-ui",
};
export function BrandedChart() {
return <Chart symbol="BTC" theme={theme} style={{ height: 520 }} />;
}Engine theme helpers
import { defineTheme, resolveTheme } from "@mmflow/charts";
const darkEngineTheme = defineTheme({
background: "#0b0f14",
text: "#d7e2f2",
});
const lightEngineTheme = resolveTheme(
{ background: "#ffffff", text: "#111827" },
"light",
);Theme guidance
Chart props accept ThemeTokens. The lower-level helpers resolve those tokens into engine ChartTheme values for hosts that need that shape.
Token colors
Use hex colors for background, text, grid, border, candles, volume, and crosshair.
Live updates
The React binding applies new theme props through the confirmed applyTheme path.
Readable embeds
Keep grid and crosshair contrast high enough for dense order-flow layers.
Continue building
Move through the chart SDK docs without leaving the developer flow.