后管设置全局style样式_document.documentelement.style.setproperty

定义

// 处理主题样式  参考maku-element-admin-pina

export const handleThemeStyle = (theme: ITheme) => {

    document.documentElement.style.setProperty('--el-color-primary', theme.primaryColor)

    for (let i = 1; i <= 9; i++) {

        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme.primaryColor, i / 10)}`)

    }

    for (let i = 1; i <= 9; i++) {

        document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme.primaryColor, i / 10)}`)

    }

}

使用app.vue

import { handleThemeStyle } from '@/utils/theme'

onMounted(() => {

    nextTick(() => {

        // 初始化主题样式

        handleThemeStyle(store.appStore.theme)

    })

})

样式定义

.head-box {

    display: flex;

    border-bottom: 1px solid var(--el-border-color-lighter);

    box-sizing: border-box;

    color: var(--el-text-color-primary);

    justify-content: space-between;

    height: 35px;

    align-items: center;

    .head-box-btn {

        color: var(--el-color-primary);

        font-size: 13px;

        cursor: pointer;

        opacity: 0.8;

        &:hover {

            opacity: 1;

        }

    }

}

// 变浅颜色值

const getLightColor = (color: string, level: number) => {

    let rgb = hexToRgb(color)

    for (let i = 0; i < 3; i++) {

        rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])

    }

    return rgbToHex(rgb[0], rgb[1], rgb[2])

}

// 变深颜色值

const getDarkColor = (color: string, level: number) => {

    let rgb = hexToRgb(color)

    for (let i = 0; i < 3; i++) {

        rgb[i] = Math.floor(rgb[i] * (1 - level))

    }

    return rgbToHex(rgb[0], rgb[1], rgb[2])

}

app.js

import { defineStore } from 'pinia'

import { ITheme } from '@/store/theme/interface'

import cache from '@/utils/cache'

export const appStore = defineStore('appStore', {

    state: () => ({

        // sidebar 是否展开

        sidebarOpened: cache.getSidebarOpened(),

        // 国际化

        language: cache.getLanguage(),

        // 组件大小

        componentSize: cache.getComponentSize(),

        // 主题

        theme: cache.getTheme()

    }),

    actions: {

        setSidebarOpened() {

            this.sidebarOpened = !this.sidebarOpened

            cache.setSidebarOpened(this.sidebarOpened)

        },

        setLanguage(locale: string) {

            this.language = locale

            cache.setLanguage(locale)

        },

        setComponentSize(size: string) {

            this.componentSize = size

            cache.setComponentSize(size)

        },

        setTheme(theme: ITheme) {

            this.theme = theme

            cache.setTheme(theme)

        }

    }

})

cache.js

import { SessionStorage, Storage } from '@/utils/storage'

import CacheKey from '@/utils/cache/key'

import { ITheme } from '@/store/theme/interface'

import { themeConfig } from '@/store/theme/config'

// 缓存

class Cache {

    getToken = (): string => {

        return Storage.getItem(CacheKey.TokenKey) || ''

    }

    setToken = (value: string) => {

        Storage.setItem(CacheKey.TokenKey, value)

    }

    getSidebarOpened = (): boolean => {

        return Storage.getItem(CacheKey.SidebarOpenedKey) || false

    }

    setSidebarOpened = (value: boolean) => {

        Storage.setItem(CacheKey.SidebarOpenedKey, value)

    }

    getLanguage = (): string => {

        return Storage.getItem(CacheKey.LangKey) || 'zh-CN'

    }

    setLanguage = (value: string) => {

        Storage.setItem(CacheKey.LangKey, value)

    }

    getComponentSize = (): string => {

        return Storage.getItem(CacheKey.ComponentSizeKey) || 'default'

    }

    setComponentSize = (value: string) => {

        Storage.setItem(CacheKey.ComponentSizeKey, value)

    }

    getTheme = (): ITheme => {

        return (SessionStorage.getItem(CacheKey.ThemeKey) as ITheme) || themeConfig

    }

    setTheme = (value: ITheme) => {

        SessionStorage.setItem(CacheKey.ThemeKey, value)

    }

    removeTheme = () => {

        SessionStorage.removeItem(CacheKey.ThemeKey)

    }

}

export default new Cache()

cache下的key.js

export default {

    SidebarOpenedKey: 'sidebarOpened',

    LangKey: 'lang',

    ComponentSizeKey: 'componentSize',

    TokenKey: 'token',

    ThemeKey: 'theme'

}

import { handleThemeStyle } from '@/utils/theme'

// 处理主题色

const handleThemeColor = (color: string) => {

    theme.value.primaryColor = color

    cache.setTheme(theme.value)

    handleThemeStyle(theme.value)

}