Custom themes API
Overview
The library ships with the default light and dark themes. The themes use the TradingView color palette that contains 7 colors besides black and white. These colors are applied to the chart and UI elements outside the chart such as toolbars and dialogs.
Consider the example below. It includes the TradingView color palette that you can interact with. Specify a color instead of the default one, for example, blue, and all the elements that originally use blue will adopt the specified color.
In this example, the default colors are adjusted with the Custom themes API. This API allows you to set up and manage custom color palettes.
The Custom themes API changes colors both inside and outside the chart. Note that the Overrides API, which also affects elements on the chart, has higher priority than the Custom themes API. Therefore, colors provided with overrides will apply above the custom palette colors.
Specify custom themes
To specify custom palettes for the light and dark themes, assign a CustomThemes
object to the custom_themes
property of the Widget Constructor.
A color palette should contain seven colors that replace the default TradingView ones. You can also specify colors used instead of black and white. If any color is not provided, the default one will be used.
For each color, specify 20 shades to cover a range of brightness and darkness levels. To do this, create an array of color strings from the lightest to the darkest.
var widget = window.tvWidget = new TradingView.widget({
// ...
custom_themes: {
light: {
"color1": ["#f5ebff", "#ead6fe", "#e0c2fe", "#d5adfe", "#cb99fd", "#c184fd", "#b670fd", "#ac5bfc", "#a147fc", "#9732fc", "#8209fb", "#7708e6", "#6c08d1", "#6207bc", "#5706a7", "#4c0592", "#41057e", "#360469", "#2b0354", "#21023f"],
"color2": ["#f2edf7", "#e6dcef", "#d9cae7", "#ccb9df", "#bfa7d7", "#b396d0", "#a684c8", "#9972c0", "#8c61b8", "#804fb0", "#662ca0", "#5e2893", "#552585", "#4d2178", "#441d6b", "#3c1a5d", "#331650", "#2b1243", "#220f35", "#1a0b28"],
"color3": ["#fff0f0", "#ffe1e1", "#ffd3d3", "#ffc4c4", "#ffb5b5", "#ffa6a6", "#ff9797", "#ff8888", "#ff7a7a", "#ff6b6b", "#ff4d4d", "#ea4747", "#d54040", "#bf3a3a", "#aa3333", "#952d2d", "#802727", "#6a2020", "#551a1a", "#401313"],
"color4": ["#f2fdf8", "#e5faf0", "#d7f8e9", "#caf5e1", "#bdf3da", "#b0f1d2", "#a2eecb", "#95ecc3", "#88e9bc", "#7be7b4", "#60e2a5", "#58cf97", "#50bc8a", "#48aa7c", "#40976e", "#388460", "#307153", "#285e45", "#204b37", "#183929"],
"color5": ["#fef5ea", "#fdecd5", "#fbe2bf", "#fad9aa", "#f9cf95", "#f8c680", "#f6bc6a", "#f5b255", "#f4a940", "#f39f2b", "#f08c00", "#dc8000", "#c87500", "#b46900", "#a05d00", "#8c5200", "#784600", "#643a00", "#502f00", "#3c2300"],
"color6": ["#feeafe", "#fcd5fc", "#fbbffb", "#f9aaf9", "#f895f8", "#f780f7", "#f56af5", "#f455f4", "#f240f2", "#f12bf1", "#ee00ee", "#da00da", "#c600c6", "#b300b3", "#9f009f", "#8b008b", "#770077", "#630063", "#4f004f", "#3c003c"],
"color7": ["#fefeea", "#fcfcd5", "#fbfbbf", "#f9f9aa", "#f8f895", "#f7f780", "#f5f56a", "#f4f455", "#f2f240", "#f1f12b", "#eeee00", "#dada00", "#c6c600", "#b3b300", "#9f9f00", "#8b8b00", "#777700", "#636300", "#4f4f00", "#3c3c00"],
"white": "#f2e6ff",
"black": "#421b50"
},
dark: {
"color1": ["#fbefea", "#f7dfd5", "#f3cfc0", "#efbfaa", "#ebaf95", "#e89f80", "#e48f6b", "#e07f56", "#dc6f41", "#d85f2b", "#d03f01", "#bf3a01", "#ad3501", "#9c2f01", "#8b2a01", "#792501", "#682001", "#571a00", "#451500", "#341000"],
"color2": ["#f8eeee", "#f1dede", "#eacdcd", "#e2bcbc", "#dbacac", "#d49b9b", "#cd8a8a", "#c67a7a", "#bf6969", "#b75858", "#a93737", "#9b3232", "#8d2e2e", "#7f2929", "#712525", "#632020", "#551c1c", "#461717", "#381212", "#2a0e0e"],
"color3": ["#fff0f0", "#ffe1e1", "#ffd3d3", "#ffc4c4", "#ffb5b5", "#ffa6a6", "#ff9797", "#ff8888", "#ff7a7a", "#ff6b6b", "#ff4d4d", "#ea4747", "#d54040", "#bf3a3a", "#aa3333", "#952d2d", "#802727", "#6a2020", "#551a1a", "#401313"],
"color4": ["#f2fffb", "#e6fff7", "#d9fff2", "#ccffee", "#bfffea", "#b3ffe6", "#a6ffe1", "#99ffdd", "#8cffd9", "#80ffd5", "#66ffcc", "#5eeabb", "#55d5aa", "#4dbf99", "#44aa88", "#3c9577", "#338066", "#2b6a55", "#225544", "#1a4033"],
"color5": ["#fffff0", "#ffffe0", "#feffd1", "#feffc2", "#feffb2", "#feffa3", "#fdff94", "#fdff84", "#fdff75", "#fdff66", "#fcff47", "#e7ea41", "#d2d53b", "#bdbf35", "#a8aa2f", "#939529", "#7e8024", "#696a1e", "#545518", "#3f4012"],
"color6": ["#fff1ff", "#ffe2ff", "#ffd4ff", "#ffc5ff", "#ffb7ff", "#ffa9ff", "#ff9aff", "#ff8cff", "#ff7dff", "#ff6fff", "#ff52ff", "#ea4bea", "#d544d5", "#bf3ebf", "#aa37aa", "#953095", "#802980", "#6a226a", "#551b55", "#401540"],
"color7": ["#eff8ff", "#dff1ff", "#cfeaff", "#bee3ff", "#aedcff", "#9ed5ff", "#8eceff", "#7ec7ff", "#6ec0ff", "#5db9ff", "#3dabff", "#389dea", "#338fd5", "#2e80bf", "#2972aa", "#246495", "#1f5680", "#19476a", "#143955", "#0f2b40"],
"white": "#ffffff",
"black": "#000000"
}
}
});
Manage custom themes
To manage custom themes after the chart is initialized, you should call the customThemes
method. This method returns an instance of the ICustomThemesApi
interface that provides an extensive API for controlling the themes.
Change custom themes on the fly
To change the color palettes on the fly, call the applyCustomThemes
method and pass a CustomThemes
object as a parameter.
let customThemesAPI = (await widget.customThemes());
customThemesAPI.applyCustomThemes(customThemes);
Reset custom themes
To reset the color palette back to the default TradingView colors, call the resetCustomThemes
method.
let customThemesAPI = (await widget.customThemes());
customThemesAPI.resetCustomThemes();
Disable the Custom themes API
To disable Custom themes API, add the library_custom_color_themes
featureset to the disabled_features
array.
In this case, the The library_custom_color_themes feature must be enabled to use the Custom themes API error occurs when the API is called.