Skip to main content

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.

caution

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.