Skip to content

Default Light Theme

ts
const defaultLightTheme: Theme = {
  chart: {
    backgroundColor: 'white',
    borders: {
      left:   { color: '#ddd', width: 1, style: 'solid' },
      right:  { color: '#ddd', width: 1, style: 'solid' },
      top:    { color: '#ddd', width: 1, style: 'solid' },
      bottom: { color: '#ddd', width: 1, style: 'solid' },
    },
    xAxis: {
      height: 60,
      border: { color: '#ddd', width: 1, style: 'solid' },
      minorLabels: {
        color: '#555',
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'normal',
        fontVariant: 'normal',
        fontStyle: 'normal',
        top: 8,
      },
      majorLabels: {
        color: '#555',
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 600,
        fontVariant: 'normal',
        fontStyle: 'normal',
        top: 20,
      },
    },
    grid: {
      time:  { color: '#ccc', width: 0.5, style: 'solid' },
      value: { color: '#ccc', width: 0.5, style: 'solid' },
    },
    crosshairs: {
      time: {
        line:  { color: '#555', width: 0.5, style: 'dashed', dashes: [5, 5] },
        label: { top: 8, backgroundColor: '#1a1a1a', borderColor: '#1a1a1a', color: 'white', borderWidth: 0, hPadding: 12, vPadding: 6 },
      },
      value: {
        line:  { color: '#555', width: 0.5, style: 'dashed', dashes: [5, 5] },
        label: { padding: 8, backgroundColor: '#1a1a1a', borderColor: '#1a1a1a', color: 'white', borderWidth: 0, hPadding: 8, vPadding: 6 },
      },
    },
  },
  panels: {
    paddingTop: 16,
    paddingBottom: 16,
    borderTop: { color: '#ddd', width: 2, style: 'solid' },
    controls: {
      goToLatestButton: {
        color: '#555',
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'normal',
        fontVariant: 'normal',
        fontStyle: 'normal',
        backgroundColor: '#e2e2e2',
        borderColor: '#e2e2e2',
        borderWidth: 0,
        borderRadius: 4,
      },
    },
  },
  layers: {
    candlesticks: {
      body: {
        up:   { width: 0.6, backgroundColor: '#10b981', borderColor: '#10b981', borderWidth: 0 },
        down: { width: 0.6, backgroundColor: '#ef4444', borderColor: '#ef4444', borderWidth: 0 },
        flat: { width: 0.6, backgroundColor: '#333',    borderColor: '#333',    borderWidth: 0 },
      },
      wick: {
        up:   { width: 1, color: '#10b981', style: 'solid' },
        down: { width: 1, color: '#ef4444', style: 'solid' },
        flat: { width: 1, color: '#333',    style: 'solid' },
      },
      valueMarker: {
        up: {
          line:  { color: '#10b981', width: 1, style: 'dashed', dashes: [5, 5] },
          label: { padding: -3, backgroundColor: 'white', borderWidth: 1, borderColor: '#10b981', color: '#10b981', fontWeight: 'bold', hPadding: 8, vPadding: 6 },
        },
        down: {
          line:  { color: '#ef4444', width: 1, style: 'dashed', dashes: [5, 5] },
          label: { padding: -3, backgroundColor: 'white', borderWidth: 1, borderColor: '#ef4444', color: '#ef4444', hPadding: 8, vPadding: 6 },
        },
        flat: {
          line:  { color: '#10b981', width: 1, style: 'dashed', dashes: [5, 5] },
          label: { padding: -3, backgroundColor: 'white', borderWidth: 1, borderColor: '#10b981', color: '#10b981', hPadding: 8, vPadding: 6 },
        },
      },
      legend: {
        fields: [
          { output: 'open',  color: '#1a1a1a' },
          { output: 'high',  color: '#1a1a1a' },
          { output: 'low',   color: '#1a1a1a' },
          { output: 'close', color: '#1a1a1a' },
        ],
      },
    },
    priceLine: {
      valueLine: { color: 'dodgerblue', width: 2, style: 'solid', endDotSize: 5 },
      valueMarker: {
        line:  { color: 'dodgerblue', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { padding: 8, backgroundColor: 'dodgerblue', borderColor: '#ccc', color: 'white', borderWidth: 0, hPadding: 8, vPadding: 6 },
      },
      legend: {
        fields: [{ output: 'price', color: 'dodgerblue', label: '' }],
      },
    },
    volumeBars: {
      bars: {
        up:   { width: 0.6, backgroundColor: '#10b98177', borderColor: '#10b98177', borderWidth: 0 },
        down: { width: 0.6, backgroundColor: '#ef444477', borderColor: '#ef444477', borderWidth: 0 },
        flat: { width: 0.6, backgroundColor: '#ccc',      borderColor: '#ccc',      borderWidth: 1 },
      },
      valueMarker: {
        line:  { color: '#555', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { padding: -3, color: '#1a1a1a', backgroundColor: '#ccc', borderWidth: 0, borderColor: '#ccc', hPadding: 8, vPadding: 6 },
      },
      legend: {
        fields: [{ output: 'volume', color: '#1a1a1a' }],
      },
    },
    stochastic: {
      kLine: { color: '#1a1a1a', width: 1, style: 'solid' },
      dLine: { color: 'red',     width: 1, style: 'solid' },
      kValueMarker: {
        line:  { color: '#1a1a1a', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { padding: -3, backgroundColor: '#1a1a1a', borderColor: '#1a1a1a', color: 'white', borderWidth: 0, hPadding: 8, vPadding: 6 },
      },
      dValueMarker: {
        line:  { color: '#ef4444', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { padding: -3, backgroundColor: '#ef4444', borderColor: '#ef4444', color: 'white', borderWidth: 0, hPadding: 8, vPadding: 6 },
      },
      legend: {
        fields: [
          { output: 'k', color: '#1a1a1a' },
          { output: 'd', color: '#ef4444' },
        ],
      },
    },
  },
};

React Candlesticks is available on npm and GitHub under the MIT License.