Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change Trading view theme color into dark black

I want to change tradingview theme color into Darkblack color. Right now trading view has 2 theme options, light / dark, but the problem is dark theme is not a jet black theme. I need a jet black trading view chart.

Here is my code and example picture where I am applying, I want the chart color like theme color. enter image description here

ChartingWidget = new TradingView.widget({
    fullscreen: true,
    symbol: CurrentSymbol,
    interval: intervalType,
    container_id: containerID,
    datafeed: new Datafeeds.UDFCompatibleDatafeed(localStorage.getItem("current_domain") + "Charting"),
    library_path: "/ChartingTool/charting_library/",
    locale: getParameterByName('lang') || "en",
    charts_storage_url: localStorage.getItem("current_domain") + "Charting",
    charts_storage_api_version: "/",
    timezone: 'Asia/Ashkhabad',
    client_id: 'investorslounge.com',
    user_id: uuid,
    theme: 'dark',
    drawings_access: { type: 'black', tools: [{ name: "Regression Trend" }] },
    enabled_features: ["right_bar_stays_on_scroll"
                        , "minimalistic_logo"
                        , "narrow_chart_enabled"
                        , "header_saveload"
                        , "header_widget_dom_node"
                        , "header_screenshot"
                        , "show_logo_on_all_charts"
                        , "study_templates"],
    disabled_features: ["use_localstorage_for_settings"
                        , "link_to_tradingview"
                        , "volume_force_overlay"
                        , "header_interval_dialog_button"
                        //, "show_dialog_on_snapshot_ready"
                        , "study_templates"
                        , "chart_property_page_trading"
                        , "chart_crosshair_menu"
                        , "hide_last_na_study_output"],
    logo: {
        image: "https://www.investorslounge.com/Images/IL_blackSymbol.png",
        link: "https://www.investorslounge.com/"
    },
    enabled_features: ["hide_left_toolbar_by_default"],
    overrides: {
        "theme" : "#000000",
        "volumePaneSize": "medium"
        , "symbolWatermarkProperties.color": "#000000"
        , "symbolWatermarkProperties.transparency": 100
        , "paneProperties.topMargin": 10
        , "paneProperties.background": "#171B26"
        //, "paneProperties.vertGridProperties.color": "#F2F2F2"
        //, "paneProperties.horzGridProperties.color": "#F2F2F2"
        , "scalesProperties.showStudyLastValue": true
    }
});
like image 743
Uzair Khan Avatar asked Jan 30 '26 16:01

Uzair Khan


1 Answers

you can use "paneProperties.background" in override to change chart body color:

overrides: {
     "paneProperties.background": "#191919",
     "paneProperties.backgroundType": "solid",
},

if you want to change toolbar color use this code in chart option:

toolbar_bg: "transparent",

and you can change loading background:

loading_screen: {
    backgroundColor: "transparent",
},
like image 135
Farid Avatar answered Feb 02 '26 02:02

Farid



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!