SkillAegis/src/components/TheThemeButton.vue

<script setup>
  import { ref, watch } from 'vue'
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'

  const darkMode = ref(true)

  watch(darkMode, (newValue) => {
    if (newValue) {
        document.getElementsByTagName('body')[0].classList.add('dark')
      } else {
        document.getElementsByTagName('body')[0].classList.remove('dark')
    }
  })
</script>

<template>
  <div class="flex">
    <label class="grid cursor-pointer place-items-center">
      <input
        type="checkbox"
        @click="darkMode = !darkMode"
        :checked="darkMode"
        class="toggle theme-controller bg-slate-400 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0]" />
      <svg
        class="stroke-base-100 fill-base-100 col-start-1 row-start-1"
        xmlns="http://www.w3.org/2000/svg"
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
        <circle cx="12" cy="12" r="5" />
        <path
          d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
      </svg>
      <svg
        class="stroke-base-100 fill-base-100 col-start-2 row-start-1"
        xmlns="http://www.w3.org/2000/svg"
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
      </svg>
    </label>
  </div>
</template>