自定义tradingview charting_library标头

Question

我目前已完成整合tradingview库，并对样式的某些部分进行了初始自定义。

下面的当前css：

.chart-page .apply-common-tooltip, .chart-page .button.undo, .chart-page .button.redo,
.chart-page .symbol-edit-widget .symbol-edit-inputspacer input.symbol-edit {
    background: rgba(30,30,30,0.5) !important;
    /* background: blue !important; */
    border-color: #444 !important;
    color: #fff!important;
}
body, .chart-controls-bar, #footer-chart-panel{
    background-color: rgba(30,30,30,0.5) !important;
}
.chart-page .chart-container {
    background: none !important;
    border-color: #444 !important; 
}
.drawingToolbar-2CoOuCv8-{
    background-color: rgba(30,30,30,0.5);
}
.separator-3cgsM4c1-{
    background-color: #666;
}
a.button.getimage.apply-common-tooltip {
    background-color: #97999d !important;
}

我想要的是实际修改图表的标题面板，我似乎无法获得正确的CSS组合以使其更接近图表主体，并在不破坏子级的情况下降低其高度。

下面是当前屏幕截图，其中包含我要自定义的位置的指示符。

Answer 1

灯光

html.theme-light .group-wWM3zP_M- {
  background: #1E1E1F !important;
}

或黑暗

html.theme-dark .group-wWM3zP_M- {
  background: #1E1E1F !important;
}

Answer 2

您应该配置新的CSS文件：

var tvChart= new TradingView.widget(option);
tvChart.onChartReady(function() {
    tvChart.addCustomCSSFile('css/my-custom-css.css')
})

并将您的新样式放入“ my-custom-css.css”