解析使用useDark(),发现transition 动画失效

<template>
  <div class="theme-change">
      <button
        class="switch"
        @click="toggleTheme"
        role="switch"
        aria-label="切换暗色主题"
        :class="{
          k: isDark
        }"
      >
        按钮
      </button>
  </div>
</template>
<script setup lang="ts">
const isDark = useDark();
function toggleTheme() {
  isDark.value = isDark.value ? false : true;
}
</script>
<style scoped lang="scss">
.theme-change {
  .switch {
    transition: all 3s;
    background: green;
  }
}
.k.switch {
  background: red;
}
</style>

// const isDark = useDark();
const isDark = ref(false);

// const isDark = useDark();
const isDark = ref(false);
function toggleTheme() {
  document.documentElement.classList.toggle('dark')
  isDark.value = isDark.value ? false : true;
}