Измените источник iframe, когда включен темный режим, и измените его обратно, когда темный режим отключен

Question

ЦЕЛЬ. Я хочу изменить источник iFrame, когдаonclick="toggleDarkMode() активирован и измените его обратно, когда onclick="toggleDarkMode() выключен.

ПРОБЛЕМА. Моя текущая кнопка "Темный режим" меняет источник iFrame только один раз, когдаonclick="toggleDarkMode()активирован на "//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&darkpopout". Затем, когда я щелкаю по нему еще раз, источник не меняется на "//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&popout". Если бы кто-нибудь мог помочь мне разобраться в этом, я был бы очень признателен. Заранее спасибо.

Мой текущий код iframe по умолчанию при загрузке страницы:

<iframe id="myFrame" src="//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&popout" frameborder="0" scrolling="no" height="100%" width="100%"></iframe>

Мой текущий код javascript, который меняет источник iframe, когда onclick="toggleDarkMode() активирован:

<script>
function myFunctionDark() {
    document.getElementById("myFrame").src = "//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&darkpopout";

}
</script>

Это моя текущая кнопка "Темного режима", которая запускает функции "toggleDarkMode" и "myFunctionDark":

<i class="material-icons dropdown-toggle" onclick="toggleDarkMode();myFunctionDark()" data-tooltip="Dark Mode" data-tooltip-pos="left">wb_sunny</i>

LIVE LINK, ГДЕ ПРИСУТСТВУЕТ ПРОБЛЕМА (кнопка "Темный режим" находится в правом верхнем углу ")

Answer 1

Вы всегда выполняете myFunctionDark(), и это только делает чат темным. Попробуйте установить внутри такое условие:

function myFunctionDark() {
  if($(".app-container").hasClass("dark")) {
    document.getElementById("myFrame").src = "//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&darkpopout";
  } else {
    document.getElementById("myFrame").src = "//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&popout";
  }
}