diff --git a/docs/.vitepress/theme/dark-mode.js b/docs/.vitepress/theme/dark-mode.js new file mode 100644 index 000000000..9d60fdba7 --- /dev/null +++ b/docs/.vitepress/theme/dark-mode.js @@ -0,0 +1,27 @@ +import { ref, computed, inject } from 'vue'; + +export function createDarkMode(app) { + const prefersDark = ref(false); + const setting = ref('auto'); + + const isDark = computed( + () => + setting.value === 'dark' || + (prefersDark.value && setting.value !== 'light') + ); + const toggleDark = () => { + setting.value = setting.value === 'dark' ? 'light' : 'dark'; + localStorage.setItem('color-scheme', setting.value); + }; + + prefersDark.value = + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches; + setting.value = localStorage.getItem('color-scheme') || 'auto'; + + app.provide('is-dark', { isDark, toggleDark }); +} + +export function useDarkMode() { + return inject('is-dark'); +}