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' },
],
},
},
},
};