暗黑模式
Pixelium Design 已把所有颜色变量提取为 CSS 变量。基于此,我们支持了暗黑模式,并且支持默认的自动跟随系统切换和手动切换。
- 跟随系统:
@media (prefers-color-scheme: dark)
媒体查询自动切换暗黑模式。 - 手动切换:通过使用
useThemeMode
钩子手动设置html
节点上的类名实现。
useThemeMode
useThemeMode
通过设置 html
节点上的类名实现暗黑 / 明亮主题模式切换,它使得 CSS 选择器或者某些监听器受到影响从而改变组件的主题颜色。
一个简单的使用例子如下所示:
ts
import { useThemeMode } from '@pixelium/web-vue'
// If on-demand import
// import { useThemeMode } from '@pixelium/web-vue/es'
const [mode, toggle, clear, followMedia] = useThemeMode()
mode
是一个 Vue ref 变量,有 3 个取值:'dark'
(暗黑模式)、'light'
(明亮模式)、'unset'
(跟随系统)。默认值是当前 @media (prefers-color-scheme: dark)
媒体查询对应的主题模式。它将会设置 html
节点上的类名,通过修改它的值就可以切换到暗黑 / 明亮模式。
toggle
是切换暗黑 / 明亮模式的函数。
clear
用于把主题切换到跟随系统。
clear
用于把主题切换到跟随系统。
followMedia
把当前 @media (prefers-color-scheme: dark)
媒体查询对应的主题模式应用到 mode
中。
可以在这里试一下:
matchMedia('(prefers-color-scheme: dark)'): false
<template>
Current Theme: {{ mode }}
<br />
matchMedia('(prefers-color-scheme: dark)'): {{ darkMode }}
<br />
<px-space>
<px-button @click="toggle()">Toggle </px-button>
<px-button @click="clear()" theme="info">Clear Theme</px-button>
</px-space>
</template>
<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue'
import { useThemeMode } from '@pixelium/web-vue'
// If on-demand import
// import { useThemeMode } from '@pixelium/web-vue/es'
const [mode, toggle, clear] = useThemeMode()
const darkMode = ref(false)
if (typeof window !== 'undefined') {
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
function handleDarkModeChange(e: MediaQueryListEvent | MediaQueryList) {
darkMode.value = e.matches
}
handleDarkModeChange(darkModeQuery)
darkModeQuery.addEventListener('change', handleDarkModeChange)
onBeforeUnmount(() => {
darkModeQuery.removeEventListener('change', handleDarkModeChange)
})
}
</script>