vue.js - Vue - ボタンをクリックしてプロジェクト全体をダークモードに変換する方法は?

Question

Vue プロジェクトがあり、現在 50 を超えるコンポーネントがあります。プロジェクト全体にダーク モードを用意し、ナビゲーション バーのボタンからモード タイプを制御したいと考えています。テスト バージョンを作成したので、クラスをアクティブおよび非アクティブにする方法を理解しましたが、1 つのボタンをクリックするか、チェックボックスをオンにして、プロジェクト全体でそれを行う方法がわかりません。これが私のテストです。

<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 クラス全体をボタンまたはスイッチでどのように制御できるかです。小道具を使用する必要がある場合、どうすればよいですか? 前もって感謝します。