Переключатель темной и светлой темы виджета Tradingview - PullRequest
0 голосов
/ 26 мая 2020

Я использую виджет 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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...