Fullscreen mode in Nuxt app changes background color

Question

I want to have a button (icon) which will make the whole page full-screen. I did implement it in my Nuxt 3 app, but when the page becomes fullscreen, it changes background color from white to black and I don't know why.

Here's my app.vue code:

<template>
  <div id="main_screen">
    <header>
      <div>
        <nav>
          <NuxtLink to="/candidates" class="nav-button">Kandidaten</NuxtLink
        </nav>
      </div>
      <div>
        <div class="flex flex-row place-items-center">
          <img class="logo" src="~/assets/img/Logo.svg" />
          <img
            src="~/assets/img/fullscreen.png"
            class="h-5 w-5 mx-5 cursor-pointer"
            @click="fullScreen"
          />
        </div>
      </div>
    </header>

    <main>
      <NuxtPage />
    </main>
  </div>
</template>

<script setup>
useHead({
  title: (titleChunk) => {
    return titleChunk ? `${titleChunk} | MyApp` : "MyApp";
  },
});

const isFullscreen = ref(false);

function fullScreen() {
  const fullscreen = document.querySelector("#main_screen");

  if (!isFullscreen.value) fullscreen.requestFullscreen();
  else document.exitFullscreen();

  isFullscreen.value = !isFullscreen.value;
}
</script>

Here's the edge of my browser page before fullscreen mode:

and here's how it looks after clicking on fullscreen button:

Answer 1

Adding style to this id helped:

#main_screen {
  background-color: white;
}
</style>