2024年06月16日 建站教程
默认情况下，使用 layui-vue 搭建的网站主题为日间模式。那么如何启用夜间模式呢？下面web建站小编给大家简单介绍一下具体实现代码！
若启用夜间模式, 将 config-provider 组件 theme 属性设置为 dark 值。
<template>
<lay-config-provider :theme="theme">
<App />
</lay-config-provider>
</template>
<script setup>
const theme = ref('dark')
</script>
选项配置
默认的夜间模式不满足要求时, 可通过 config-provider 组件 dark-partial 属性进行偏好设置。
<template>
<lay-config-provider :theme="theme" :dark-partial="darkPartial">
<App />
</lay-config-provider>
</template>
<script setup>
const theme = ref('dark')
const darkPartial = {
brightness: 100,
contrast: 90,
grayscale: 0,
darkSchemeBackgroundColor: "black";
darkSchemeTextColor: "white";
}
</script>
Dark Partial属性介绍
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| brightness | 亮度 | number | 100 | 0 – 100 |
| contrast | 对比度 | number | 100 | 0 – 100 |
| grayscale | 灰度值 | number | 0 | 0 – 100 |
| darkSchemeBackgroundColor | 背景颜色 | string | – | – |
| darkSchemeTextColor | 前景颜色 | string | – | – |
本文链接：http://so.lmcjl.com/news/6649/