I have integrated a TradingView widget into my website and I am working on adding a dark/light mode switch to the site. I would like the widget color to change along with the background in the switch. See Widget Screenshot
TradingView Widget - Widget source
In the screenshot, you can observe that the widget has white color on the top panel and right-side panel while the chart itself is black. How can I adjust these sides to change with the toggle switch as well?
Here is the JS code for the theme switch.
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 toggles between dark and light mode on the entire 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 selected and saves it for the next user visit on the website
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
toggleSwitch.checked = currentTheme === 'dark';
loadedTheme = ThemeAliases[currentTheme];
}
Widget code
<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);
}