支持全局主题颜色设置

RuoYi

2022-07-31 f8e64316848ab390ddc550eea81e45e604ade500

支持全局主题颜色设置

 src/App.vue

@@ -1,3 +1,15 @@
<template>

  <router-view />

</template>



<script setup>

import useSettingsStore from '@/store/modules/settings'

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



onMounted(() => {

  nextTick(() => {

    // åˆå§‹åŒ–主题样式

    handleThemeStyle(useSettingsStore().theme)

  })

})

</script>


 src/layout/components/Settings/index.vue

@@ -87,6 +87,7 @@
import useAppStore from '@/store/modules/app'

import useSettingsStore from '@/store/modules/settings'

import usePermissionStore from '@/store/modules/permission'

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



const { proxy } = getCurrentInstance();

const appStore = useAppStore()

@@ -143,6 +144,7 @@
function themeChange(val) {

  settingsStore.changeSetting({ key: 'theme', value: val })

  theme.value = val;

  handleThemeStyle(val);

}

function handleTheme(val) {

  settingsStore.changeSetting({ key: 'sideTheme', value: val })


 src/utils/theme.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,49 @@
// å¤„理主题样式
export function handleThemeStyle(theme) {
    document.documentElement.style.setProperty('--el-color-primary', theme)
    for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme, i / 10)}`)
    }
    for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme, i / 10)}`)
    }
}

// hex颜色转rgb颜色
export function hexToRgb(str) {
    str = str.replace('#', '')
    let hexs = str.match(/../g)
    for (let i = 0; i < 3; i++) {
        hexs[i] = parseInt(hexs[i], 16)
    }
    return hexs
}

// rgb颜色转Hex颜色
export function rgbToHex(r, g, b) {
    let hexs = [r.toString(16), g.toString(16), b.toString(16)]
    for (let i = 0; i < 3; i++) {
        if (hexs[i].length == 1) {
            hexs[i] = `0${hexs[i]}`
        }
    }
    return `#${hexs.join('')}`
}

// å˜æµ…颜色值
export function getLightColor(color, level) {
    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])
}

// å˜æ·±é¢œè‰²å€¼
export function getDarkColor(color, level) {
    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])
}