下文代码基于

• 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';
    }
  });
});