<template>
  <h1 class="demo-text">
    Color mode: {{ $colorMode.value }}
  </h1>
  <select v-model="$colorMode.preference" class="demo-select">
    <option value="system">
      System
    </option>
    <option value="light">
      Light
    </option>
    <option value="dark">
      Dark
    </option>
    <option value="sepia">
      Sepia
    </option>
  </select>
</template>

<style scoped>
.dark-mode .demo-text, .dark-mode .demo-select {
  background-color: black;
  color: white;
}
.light-mode .demo-text, .dark-mode .demo-select {
  background-color: white;
  color: black;
}
.sepia-mode .demo-text, .sepia-mode .demo-select {
  background-color: #FED;
  color: #300;
}
</style>