Tradingview小部件明暗主题切换

Question

我正在为我的网站使用TradingView小部件，并且正在网站上实施暗/亮模式切换，并且我还希望在切换中使用背景来更改小部件颜色。Widget Screenshot

TradingView窗口小部件-Widget source

如屏幕截图所示，当图表本身为黑色时，小部件的顶部面板和右侧面板为白色，我该如何添加这些要在开关中更改的侧面。 >

用于主题切换的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);
}