Skip to content

Default Dark Theme

ts
const defaultDarkTheme: Theme = {
  chart: {
    backgroundColor: '#1a1a1a',
    borders: {
      left:   { color: '#333', width: 1, style: 'solid' },
      right:  { color: '#333', width: 1, style: 'solid' },
      top:    { color: '#333', width: 1, style: 'solid' },
      bottom: { color: '#333', width: 1, style: 'solid' },
    },
    xAxis: {
      height: 60,
      border: { color: '#333', width: 1, style: 'solid' },
      minorLabels: {
        color: '#aaa',
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'normal',
        fontVariant: 'normal',
        fontStyle: 'normal',
        top: 8,
      },
      majorLabels: {
        color: '#ddd',
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 600,
        fontVariant: 'normal',
        fontStyle: 'normal',
        top: 20,
      },
    },
    grid: {
      time:  { color: '#2e2e2e', width: 0.5, style: 'solid' },
      value: { color: '#2e2e2e', width: 0.5, style: 'solid' },
    },
    crosshairs: {
      time: {
        line:  { color: '#888', width: 0.5, style: 'dashed', dashes: [5, 5] },
        label: { top: 8, backgroundColor: '#ddd', borderColor: '#ddd', color: '#1a1a1a', borderWidth: 0, hPadding: 12, vPadding: 6 },
      },
      value: {
        line:  { color: '#888', width: 0.5, style: 'dashed', dashes: [5, 5] },
        label: { padding: 8, backgroundColor: '#ddd', borderColor: '#ddd', color: '#1a1a1a', borderWidth: 0, hPadding: 8, vPadding: 6 },
      },
    },
  },
  panels: {
    paddingTop: 16,
    paddingBottom: 16,
    borderTop: { color: '#333', width: 2, style: 'solid' },
    controls: {
      goToLatestButton: {
        color: '#ddd',
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'normal',
        fontVariant: 'normal',
        fontStyle: 'normal',
        backgroundColor: '#2e2e2e',
        borderColor: '#444',
        borderWidth: 1,
        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: '#aaa',    borderColor: '#aaa',    borderWidth: 0 },
      },
      wick: {
        up:   { width: 1, color: '#10b981', style: 'solid' },
        down: { width: 1, color: '#ef4444', style: 'solid' },
        flat: { width: 1, color: '#aaa',    style: 'solid' },
      },
      valueMarker: {
        up: {
          line:  { color: '#10b981', width: 1, style: 'dashed', dashes: [5, 5] },
          label: { padding: -3, backgroundColor: '#1a1a1a', 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: '#1a1a1a', borderWidth: 1, borderColor: '#ef4444', color: '#ef4444', hPadding: 8, vPadding: 6 },
        },
        flat: {
          line:  { color: '#aaa', width: 1, style: 'dashed', dashes: [5, 5] },
          label: { padding: -3, backgroundColor: '#1a1a1a', borderWidth: 1, borderColor: '#aaa', color: '#aaa', hPadding: 8, vPadding: 6 },
        },
      },
      legend: {
        fields: [
          { output: 'open',  color: '#ddd' },
          { output: 'high',  color: '#ddd' },
          { output: 'low',   color: '#ddd' },
          { output: 'close', color: '#ddd' },
        ],
      },
    },
    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: 'dodgerblue', 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: '#555',      borderColor: '#555',      borderWidth: 0 },
      },
      valueMarker: {
        line:  { color: '#888', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { padding: -3, color: '#ddd', backgroundColor: '#333', borderWidth: 0, borderColor: '#333', hPadding: 8, vPadding: 6 },
      },
      legend: {
        fields: [{ output: 'volume', color: '#ddd' }],
      },
    },
    sma: {
      valueLine: { color: 'orange', width: 1, style: 'solid' },
      valueMarker: {
        line:  { color: 'orange', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { padding: -3, backgroundColor: 'orange', borderColor: 'orange', color: 'white', borderWidth: 0, hPadding: 8, vPadding: 6 },
      },
      legend: {
        fields: [{ output: 'value', color: 'orange' }],
      },
    },
    stochastic: {
      kLine: { color: '#ddd',    width: 1, style: 'solid' },
      dLine: { color: '#ef4444', width: 1, style: 'solid' },
      kValueMarker: {
        line:  { color: '#ddd', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { padding: -3, backgroundColor: '#ddd', borderColor: '#ddd', color: '#1a1a1a', 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: '#ddd' },
          { output: 'd', color: '#ef4444' },
        ],
      },
    },
  },
};

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