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