vue.js - Vue - 如何通过单击按钮将整个项目转换为暗模式？

Question

我有一个 Vue 项目，现在有 50 多个组件，我想为整个项目准备一个暗模式，我想通过导航栏上的按钮控制模式类型。我制作了一个测试版本，所以我想出了如何激活和停用类，但我不知道如何通过单击单个按钮或选中复选框来为整个项目执行此操作。这是我的测试；

<div class="container-main" :class="{'background-dark' : darkMode }">
      <!-- Enable Dark Mode -->
      <div>
        <label class="form-switch">
          <input type="checkbox" class="switch switch-md" v-model="darkMode" />
        </label>
        <label">Enable Dark Mode</label>
      </div>  
</div>

<style scoped>
  .background-dark {
    background-color: black;
  }
</style>

当开关被选中时，darkMode 变量变为 true 并且类被激活，所以我的背景颜色变为黑色。我的问题是，我将创建我现在使用的 CSS 文件的暗模式版本，并且我希望这个控件位于导航栏中，一个按钮或开关如何控制项目中整个组件的 css 类。如果我需要使用道具，我该怎么做？提前致谢。