Блог

У меня есть проект 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 всех компонентов в проекте. Если мне нужно использовать реквизит, как мне это сделать? Заранее спасибо.