开关-（暗黑主题）

vue组件-开关（切换暗黑主题）

样式

素材

阿里矢量图 搜索：月亮 ，太阳

Tailwind CSS

vue3

代码

    <template>
  <div 
    :class="[
      'switch w-20 h-8 rounded-full relative flex items-center shadow-md cursor-pointer',
      'transition-all duration-500 ease-in-out',
      backgroundC
    ]"
    @click="toggleDarkMode"
  >
    <!-- 滑块 -->
    <div 
      class="w-6 h-6 rounded-full absolute transition-all duration-500 ease-in-out"
      :class="[
        checked ? 'left-[calc(100%-1.5rem-0.375rem)] bg-moon-icon ' : 'left-1.5 bg-sun-icon',
      ]"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

const checked = ref(false);

const backgroundC = computed(() => {
  return checked.value 
    ? 'bg-gradient-to-l from-slate-900 via-purple-900 to-indigo-900 border-2 border-#999' // 黑夜（反向渐变）
    : 'bg-gradient-to-r from-cyan-200 to-blue-100'; // 白天
});

function toggleDarkMode() {
  document.documentElement.classList.toggle('my-app-dark');
  checked .value= !checked.value
}
</script>

<style>

.bg-sun-icon {
    background-image: url('../icon/svg/sun.svg');
    background-size: 130%;
    /* 控制图标大小 */
    background-repeat: no-repeat;
    background-position: center;
}

.bg-moon-icon {
    background-image: url('../icon/svg/moon.svg');
    background-size: 130%;
    /* 控制图标大小 */
    background-repeat: no-repeat;
    background-position: center;
}
</style>