hyungju-lee

5. useColorMode (feat. vueuse)

App.vue
<script setup>
import { useColorMode } from "@vueuse/core";
import IconSun from "./components/IconSun";
import IconMoon from "./components/IconMoon";
import IconCafe from "./components/IconCafe";

const colorMode = useColorMode({
  modes: {
    cafe: "cafe",
  },
});

const switchToCafe = () => {
  colorMode.value = "cafe";
};

const switchTheme = () => {
  if (colorMode.value === "dark") {
    colorMode.value = "cafe";
  } else if (colorMode.value === "cafe") {
    colorMode.value = "light";
  } else {
    colorMode.value = "dark";
  }
};
</script>

<template>
  <header>
    <h1>{{ colorMode }}</h1>
    <button type="button" @click="switchTheme">
      <IconSun v-if="colorMode === 'light'" />
      <IconMoon v-else-if="colorMode === 'dark'" />
      <IconCafe v-else />
    </button>
    <button type="button" @click="switchToCafe">Switch to Cafe</button>
  </header>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.cafe {
  filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
}

.dark {
  background-color: #222;
  color: #fff;
}
</style>