Как сделать так, чтобы мой темный режим работал при включенном полноэкранном режиме?

Question

Я делаю счетчик (я знаю, что это действительно просто) с JS, и недавно я добавил к нему темный режим. Затем я понял, что мне нужно добавить полноэкранный режим. Но, когда он находится в полноэкранном режиме, мой темный режим не работает. Я попытался найти его в Google, но ничего не смог найти. Можете ли вы взглянуть на мой код и попытаться сказать мне, что не так или что я должен добавить?

Вот JS:

var name = prompt("What do you want to name your counter?");
document.getElementById("header").innerHTML = name;
document.getElementById("title").innerHTML = "Counter: " + name;

function maxWindow() {
    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);

    var page = document.getElementById("page");

    if (!isInFullScreen) {
        if (page.requestFullscreen) {
            page.requestFullscreen();
            document.getElementById("buttonfulscrn").innerHTML = "Exit Fullscreen";
            document.getElementById("page").style.background = "white";
        } else if (page.mozRequestFullScreen) {
            page.mozRequestFullScreen();
        } else if (page.webkitRequestFullScreen) {
            page.webkitRequestFullScreen();
        } else if (page.msRequestFullscreen) {
            page.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
            document.getElementById("buttonfulscrn").innerHTML = "Fullscreen";
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

function increment() {
    var number = document.getElementById("counterAmount").value;
    number = +number + +1;
    document.getElementById("counterAmount").value = number;
}

function decrement() {
    var number = document.getElementById("counterAmount").value;
    number = +number - +1;
    document.getElementById("counterAmount").value = number;
}

function reset() {
    var number = document.getElementById("counterAmount").value;
    number = 0;
    document.getElementById("counterAmount").value = number;
}

function dark() {
    document.body.style.background = "#566880";

    document.getElementById("header").style.color = "black";

    document.getElementById("counter").style.background = "#1e2931";
    document.getElementById("counterAmount").style.background = "#566880";
    document.getElementById("counterAmount").style.color = "black";

    document.getElementById("arrow-up").style.borderBottom = "20px solid #566880";
    document.getElementById("arrow-down").style.borderTop = "20px solid #566880";

    document.getElementById("button").style.background = "#566880";
    document.getElementById("buttonreset").style.background = "#566880";
    document.getElementById("buttonfulscrn").style.background = "#566880";
    document.getElementById("button").style.color = "black";
    document.getElementById("buttonreset").style.color = "black";
    document.getElementById("buttonfulscrn").style.color = "black";
    document.getElementById("button").innerHTML = "Light Mode";
    document.getElementById("button").onclick = light;
}

function light() {

    document.body.style.background = "white";

    document.getElementById("header").style.color = "#545454";

    document.getElementById("counter").style.background = "#d7dfe7";
    document.getElementById("counterAmount").style.background = "white";
    document.getElementById("counterAmount").style.color = "gray";


    document.getElementById("arrow-up").style.borderBottom = "20px solid gray";
    document.getElementById("arrow-down").style.borderTop = "20px solid gray";
    document.getElementById("arrow-down").style.borderLeft = "20px solid transparent";
    document.getElementById("arrow-down").style.borderRight = "20px solid transparent";


    document.getElementById("button").style.background = "white";
    document.getElementById("buttonreset").style.background = "white";
    document.getElementById("buttonfulscrn").style.background = "white";
    document.getElementById("button").style.color = "#545454";
    document.getElementById("buttonreset").style.color = "#545454";
    document.getElementById("buttonfulscrn").style.color = "#545454";
    document.getElementById("button").innerHTML = "Dark Mode";
    document.getElementById("button").onclick = dark;

}

, а вот HTML:

<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<div id = "page" class="page">
  <br>
  <title id="title"></title>
  <header>
    <h1 id = "header"></h1>
  </header>
  <br>
  <div class="counter" id="counter">
    <div class="arrow-up" id="arrow-up"onclick="increment()"></div>
    <input id = "counterAmount" disabled="disabled" value="0">
    <div class="arrow-down" id="arrow-down" onclick="decrement()"></div>
    <button onclick="reset()" id="buttonreset"> Reset </button><br><br>
    <button onclick="dark()" id="button"> Dark mode </button><br><br>
    <button onclick="maxWindow()" id="buttonfulscrn"> Fullscreen </button><br><br>
  </div>  

</div>
  <script type = "text/javascript" src = "js.js"></script>

Answer 1

При переходе в темный режим с отключением полноэкранного режима: это элемент «body», который переключает цвет в темный. Но с включенным полноэкранным режимом: это элемент «div», идентифицируемый идентификатором «#page», который необходимо переключить.

Вы можете попробовать добавить эту строку в вашу функцию dark ():

document.getElementById("page").style.background = "black";

А также сделайте обратное в своей функции light (), например:

document.getElementById("page").style.background = "white";

Я рекомендую вам нажать F12 в веб-браузере, чтобы открыть редактор HTML / css кода, и вы увидите легко какие элементы должны быть темными или нет.