Vuetify全局深色主题仅对第一个组件生效第二个无效果如何解决

该现象由Vuetify主题背景的覆盖范围限制导致：Vuetify深色模式的默认背景仅作用于<v-app>容器范围，你给每个板块组件的<v-container>都设置了fill-height属性，每个容器高度等于当前视口高度，两个板块叠加后总高度达到2倍视口高度。当页面滚动到第二个板块时，该区域已经超出了<v-app>的初始渲染高度范围，浏览器默认的白色body背景就会显露出来。
交换组件顺序后，第二个渲染的组件始终处于超出<v-app>初始高度的位置，因此永远显示白色背景，和你遇到的表现完全吻合。

以下3种方案均可解决问题，按优先级推荐：

• 方案1：全局重置根元素高度（最推荐，适配所有场景，支持明暗模式自动切换）
  在全局样式文件（如public/index.html的内嵌样式、全局引入的css/sass文件）中添加如下代码：

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

该配置会让<v-app>随页面内容高度自动撑开，深色背景可覆盖整个页面范围。

• 方案2：给v-main设置主题背景类
  直接修改App.vue中的<v-main>标签，添加Vuetify内置的主题背景工具类：

<v-main class="bg-background">

bg-background类会自动匹配当前主题的背景色，切换明暗模式时无需额外修改。

• 方案3：给每个板块容器添加背景类
  如果需要每个板块独立控制背景属性，可以给Title.vue和About.vue中的<v-container>都添加bg-background类：

<v-container id="title" fill-height class="pt-16 mt-16 bg-background">

<v-container id="about-me" fill-height class="bg-background">

内容的提问来源于stack exchange，提问作者Shina