Я использую виджет TradingView для своего веб-сайта, и я использую переключатель темного / светлого режима на веб-сайте, и я хочу также изменить цвет виджета с фоном в переключателе. Снимок экрана виджета
Виджет TradingView - Источник виджета
Как вы можете видеть на скриншоте, виджет имеет белый цвет на верхней и правой панели, когда сама диаграмма имеет черный цвет, как я могу добавить эти стороны для изменения в переключателе.
JS Код для переключения темы.
const ThemeAliases = {
dark: 'dark',
light: 'light'
}
const setTheme = (theme) => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme); //add this
__onThemeChange(ThemeAliases[theme]);
};
/* This switch is toggling dark/light mode on the whole website. */
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', switchTheme, false);
function switchTheme(e) {
setTheme(e.target.checked ? 'dark' : 'light');
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
let loadedTheme = null;
// This function remembers the last theme and saves it for next user entrance on website
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
toggleSwitch.checked = currentTheme === 'dark';
loadedTheme = ThemeAliases[currentTheme];
}
Код виджета
<div class="tradingview-widget-container">
<div id="tradingview_4ff31"></div>
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BINANCE-BTCUSDT/" rel="noopener" target="_blank"><span class="blue-text">BTCUSDT Chart</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"width": 2600,
"height": 750,
"symbol": "BINANCE:BTCUSDT",
"interval": "1",
"timezone": "Europe/Helsinki",
"theme": "loadedTheme || ThemeAliases.light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"calendar": true,
"news": [
"stocktwits",
"headlines"
],
"container_id": "tradingview_4ff31"
});
</script>
</div>
CSS
:root {
--primary-color: rgb(82, 80, 144);
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
--color: black;
}
[data-theme="dark"] {
--primary-color: rgb(107, 106, 134);
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #131722;
--heading-color: #63656d;
--color: white;
}
body {
background-color: var(--bg-color);
color: var(--font-color);
}
h1 {
color: var(--secondary-color);
}
a {
color: var(--primary-color);
}