[2020-11-30] Vue, Component dark/light mode example code

HTML

<div id="app">
  
  <div class="box content" :class="modeClass">
    <h1>{{title}}</h1>
    <p>{{description}}</p>
    <label class="checkbox">
      <input type="checkbox" v-model="darkMode" />
      Dark Mode
    </label>
  </div>
  
</div>

CSS(SCSS)

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
}

.box {
  width: 300px;
  
  h1 {
    font-size: 20px;
  }
  
  &.dark-mode {
    background: black;
    color: #bbb;
    
    h1 {
      color: white;
    }
    
    .checkbox:hover {
      color: white;
    }
  }
  
}

JS(vue)

new Vue({
  el: '#app',

Methods
  data() {
    return {
      darkMode: true,
      title: '어둡고/하얗게 조절해보자',
      description: '밝기 조절을 해볼까~?'
    }
  },
  
  computed: {
    modeClass(){
      return this.darkMode ? 'dark-mode' : 'light-mode';
    }
  },
});