Nuxt 应用程序中的全屏模式会更改背景颜色

Question

我想要一个按钮（图标），它将使整个页面全屏。我确实在我的 Nuxt 3 应用程序中实现了它，但是当页面全屏显示时，它会将背景颜色从白色更改为黑色，我不知道为什么。

这是我的 app.vue 代码：

<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>

这是全屏模式之前我的浏览器页面的边缘：

这是点击全屏按钮后的样子：

Answer 1

向此 ID 添加样式有帮助：

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