How to make a button that switches the theme with Vue.js?

Question

Basically what I want to know how to do is to make a button that, when clicked, changes the theme of my website, I found threads that use PHP, but I'm studying Vue.js.

With this code I can change the color of the boxes when I click, I'm trying to formulate this to change the theme of the entire body of the page. I need help, I'm a beginner.

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<style>
#app {
display: flex;
justify-content: space-around;
}

.demo {
width: 100px;
height: 100px;
background-color: grey;
}

.c1 {
background-color: red;
}
.c2 {
background-color: green;
}
.c3 {
background-color: blue;
}
</style>

<div id="app">
 <div class="demo" :class="{c1:  aplicarC1}"  @click="aplicarC1 = !aplicarC1"></div>
 <div class="demo"  :class="{c2: aplicarC2}" @click="aplicarC2 = !aplicarC2"></div>
  <div class="demo" :class="{c3: aplicarC3}" @click="aplicarC3 = !aplicarC3 "></div>
  </div>

  <script>
  new Vue({
   el: '#app',
   data: {
   aplicarC1: false,
   aplicarC2: false,
   aplicarC3: false
   }
   })
   </script>    

PS: I forgot to do all the code in english. My bad.

Answer 1

Well I did exactly the same project a couple of weeks ago.

This is my code

The Toggle Component

<template>
  <div class="toggle-wrapper">
    <label class="switch">
      <input
        type="checkbox"
        :checked="mode === 'dark' ? 'checked' : false"
        id="togBtn"
        @change="$emit('toggle')"
      />
      <div class="slider round"></div>
    </label>
  </div>
</template>

<script>
export default {
  props: ["mode"],
};
</script>

<style>
.toggle-wrapper {
  display: flex;
  align-items: center;
  position: absolute;
  height: 60px;
  width: 70px;
  margin-left: 0.5em;
}

.switch {
  position: absolute;
  display: inline-block;
  width: 70px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #41b883;
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #35495e;
}

input:checked + .slider:before {
  background-color: #19222c;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(36px);
}

/*------ ADDED CSS ---------*/
.slider:after {
  content: "LIGHT";
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 18px;
  left: 4.75em;
  font-size: 10px;
  transition: 1s;
}

input:checked + .slider:after {
  content: "DARK";
  left: 2.3em;
  transition: 1s;
}
</style>

The App component

What you want to do inside your app component, is declare the theme as a class for example:

<template>
  <div class="app" :class="mode">
    <Header :mode="mode" @toggle="toggle" />
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name: "app",
  data() {
    return {
      mode: "light",
    };
  },
  components: {
    Header,
  },
  methods: {
    toggle() {
      if (this.mode === "dark") {
        this.mode = "light";
      } else {
        this.mode = "dark";
      }
    },
  },
};
</script>

The Header component

As you can see, my toggle component is inside the header component, this is the header:

<template>
  <header>
    <Toggle :mode="mode" @toggle="$emit('toggle')" />

    <nav>
      <router-link :to="{ name: 'Home' }" class="nav-link">Home</router-link>
      <router-link :to="{ name: 'About' }" class="nav-link">About</router-link>
      <router-link :to="{ name: 'Library' }" class="nav-link"
        >Library</router-link
      >
      <router-link :to="{ name: 'Create' }" class="nav-link"
        >Create</router-link
      >
      <router-link :to="{ name: 'Code Editor' }" class="nav-link"
        >Code Editor</router-link
      >
    </nav>
    <router-view />
  </header>
</template>

<script>
import Toggle from "@/components/Toggle";
export default {
  props: ["mode"],
  components: {
    Toggle,
  },
};
</script>

Summary

Now that you have your class which equals dark or light, you can start styling.

For example:

// Dark Mode

.dark {
  background: #15202b;
  color: #e8e8e8;
}

// Light Mode

.light {
  background: white;
  color: #15202b;
}

Oh yeah, by the way is that Spanish or Russian, or maybe even Italian. Let me know!

Hope I helped you out a bit, the result will be fascinating!