web 夜间模式检测(vue setup)

下文代码基于

  • vue 3.x
import { ref, onMounted } from 'vue';
import type { Ref } from 'vue';
/**
 * 深色模式
 */
const mqList = window.matchMedia?.('(prefers-color-scheme: dark)');
const theme: Ref<'light' | 'dark'> = ref(mqList.matches ? 'dark' : 'light');
onMounted(() => {
  mqList.addEventListener('change', (event) => {
    if (event.matches) {
      theme.value = 'dark';
    } else {
      theme.value = 'light';
    }
  });
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。