Skip to content

暗黑模式

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 中。

可以在这里试一下:

Current Theme: light
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>