Theming

You can override any of 14 color tokens, separately for light and dark mode. A token you don't set keeps its default below.

Token	Colors	Light default	Dark default
`primary`	accent: selected tabs, buttons, links	`#2EA7E0`	`#2EA7E0`
`onPrimary`	text and icons on `primary`	`#000000`	`#000000`
`onSecondary`	text on order and position tags	`#FFFFFF`	`#000000`
`surface`	page and chart background	`#F4F5F7`	`#0A0E13`
`onSurface`	main text	`#212121`	`#DDDDDD`
`surfaceContainer`	cards, sheets, panels	`#FFFFFF`	`#0F1521`
`surfaceContainerHigh`	chips, tooltips, raised rows	`#F0F2F5`	`#1E2939`
`onSurfaceVariant`	secondary text and labels	`#3C404A`	`#A0A6B2`
`inverseSurface`	alert markers, high-contrast badges	`#000000`	`#FFFFFF`
`onInverseSurface`	text on `inverseSurface`	`#FFFFFF`	`#000000`
`outline`	borders, dividers, axis lines	`#D1D9E0`	`#364153`
`bullish`	up candles, buy	`#065A3E`	`#0FEAA1`
`bearish`	down candles, sell	`#C83535`	`#FE4545`
`liveMarker`	live price marker	`#FFDA06`	`#FFDA06`

Colors

Pass an NxtChartStyle to NxtChartPage. Both fields are optional.

NxtChartPage(
  dataProvider: controller,
  style: const NxtChartStyle(
    lightColors: NxtChartColorOverrides(primary: Color(0xFF7B1FA2)),
    darkColors: NxtChartColorOverrides(
      primary: Color(0xFF7B1FA2),
      bullish: Color(0xFF26A69A),
      bearish: Color(0xFFEF5350),
    ),
  ),
)

A null primary takes your app's Theme.of(context).colorScheme.primary.

Light and dark

The chart follows your app's Theme brightness. Switch your app's theme and the chart follows.

Theming

Colors

Light and dark

On this page