@ithinkdt/naive/src/frame/layout/l-appearence.jsx

iThinkDT Naive UI

import { defineComponent, inject, useAttrs } from 'vue'

import { NButton, NIcon, NTooltip } from 'ithinkdt-ui'

import { useI18n } from '@ithinkdt/core'

import { cB, CSS_MOUNT_ANCHOR_META_NAME, CSS_STYLE_PREFIX as p } from '@ithinkdt/core/cssr'

import { IThemeLight, IThemeDark, IThemeAuto } from '../assets.jsx'

export const DtAppearence = defineComponent({
    name: 'DtAppearence',
    inheritAttrs: false,
    setup() {
        const cls = `${p}-appearence`
        createStyle(cls)

        const { t } = useI18n()

        const theme = inject('__INJECTED_THEME__')

        const attrs = useAttrs()

        function toggle() {
            theme.mode = theme.mode === 'light' ? 'dark' : theme.mode === 'dark' ? 'auto' : 'light'
        }

        return () => (
            <NTooltip delay={333} duration={0} placement="bottom">
                {{
                    default: () => t('sys.appearence'),
                    trigger: () => (
                        <NButton class={cls} quaternary circle size="large" {...attrs} onClick={toggle}>
                            <NIcon>
                                {theme.mode === 'light' ? (
                                    <IThemeLight />
                                ) : theme.mode === 'dark' ? (
                                    <IThemeDark />
                                ) : (
                                    <IThemeAuto />
                                )}
                            </NIcon>
                        </NButton>
                    ),
                }}
            </NTooltip>
        )
    },
})

let style
function createStyle(cls) {
    if (!style) {
        style = cB('appearence', {
            fontSize: '19px',
        })

        style.mount({
            id: cls,
            anchorMetaName: CSS_MOUNT_ANCHOR_META_NAME,
        })
    }
}