Bilibili-Evolved/registry/lib/components/style/dark-mode/index.ts
2021-10-26 13:19:37 +08:00

67 lines
2.0 KiB
TypeScript

import { ComponentMetadata } from '@/components/types'
import { darkExcludes } from './dark-urls'
const changeDelay = 200
const add = async () => {
// const { addStyle, addImportantStyle } = await import('@/core/style')
// const { default: darkStyle } = await import('./dark-mode.scss')
// const { default: importantStyle } = await import('./dark-mode.important.scss')
document.body.classList.add('dark')
localStorage.setItem('pbp_theme_v4', 'b')
// addStyle(darkStyle, 'darkMode')
// addImportantStyle(importantStyle, 'darkModeImportant')
}
const remove = async () => {
// const { removeStyle } = await import('@/core/style')
document.body.classList.remove('dark')
// removeStyle('darkMode', 'darkModeImportant')
}
export const component: ComponentMetadata = {
name: 'darkMode',
displayName: '夜间模式',
entry: () => {
setTimeout(add, changeDelay)
},
reload: () => {
setTimeout(add, changeDelay)
},
unload: () => {
setTimeout(remove, changeDelay)
},
description: '启用夜间模式能更好地适应光线暗的环境, 并会大量应用主题颜色.',
tags: [
componentsTags.style,
componentsTags.general,
],
instantStyles: [
{
name: 'dark-mode',
style: () => import('./dark-mode.scss'),
important: false,
},
{
name: 'dark-mode-important',
style: () => import('./dark-mode.important.scss'),
important: true,
},
],
plugin: {
displayName: '夜间模式 - 提前注入',
description: {
'zh-CN': '提前注入夜间模式的 .dark class 以减少一些组件首屏仍然是白色的问题.',
},
async setup() {
const { contentLoaded } = await import('@/core/life-cycle')
const { isComponentEnabled } = await import('@/core/settings')
contentLoaded(() => {
// 提前添加dark的class, 防止颜色抖动
if (isComponentEnabled('darkMode')) {
document.body.classList.add('dark')
}
})
},
},
urlExclude: darkExcludes,
}