js修改css变量值实现主题切换

js修改css变量值实现主题切换

                /**
                 * 主题颜色主要包含强调色（比主色更深一点）、主色（文本色）、辅色（比主色浅一点）、浅色、超浅色、灰色、白色，
                 * 前4个颜色依次由深到浅
                 * 强调色、辅色、浅色、超浅色通过主色调整颜色深度计算得出。
                 */

                // 主色
                const themePrimaryColor = decodeURIComponent(getUrlParam('themeColor')) // #005BFF, #00aa00 #409eff
                const themeBackgroundImage = decodeURIComponent(getUrlParam('themeBackgroundImage')) // #005BFF, #00aa00 #409eff

                const rgbaObject = hex2RgbaObject(themePrimaryColor)

                // 计算强调色
                const themeHighlightColorObject = calcColor(rgbaObject, -32, -32, -32, 0)
                const themeHighlightColor = rgbaObject2Hex(themeHighlightColorObject)
                
                // 计算辅色
                const themeSecondaryColorObject = calcColor(rgbaObject, 94, 94, 94, 0)
                const themeSecondaryColor = rgbaObject2Hex(themeSecondaryColorObject)
                
                // 计算浅色
                const themeUndertoneColorObject = calcColor(rgbaObject, 150, 150, 150, 0)
                const themeUndertoneColor = rgbaObject2Hex(themeUndertoneColorObject)
                
                // 计算超浅色
                const themeSuColorObject = calcColor(rgbaObject, 220, 220, 220, 0)
                const themeSuColor = rgbaObject2Hex(themeSuColorObject)

                console.log('%c 强调色 ', `background:${themeHighlightColor};color:#ccc;`)
                console.log('%c 主色 ', `background:${themePrimaryColor};color:#ccc;`)
                console.log('%c 辅色 ', `background:${themeSecondaryColor};color:#fff;`)
                console.log('%c 浅色 ', `background:${themeUndertoneColor};color:#fff;`)
                console.log('%c 超浅 ', `background:${themeSuColor};color:#000;`)


                sessionStorage.themeHighlightColor = themeHighlightColor
                sessionStorage.themePrimaryColor = themePrimaryColor
                sessionStorage.themeSecondaryColor = themeSecondaryColor
                sessionStorage.themeUndertoneColor = themeUndertoneColor
                sessionStorage.themeSuColor = themeSuColor
                sessionStorage.themeBackgroundImage = themeBackgroundImage // '/ecda/resources/images/zhu1.png'


                document.documentElement.style.setProperty('--theme-highlight-color', themeHighlightColor);
                document.documentElement.style.setProperty('--theme-primary-color', themePrimaryColor);
                document.documentElement.style.setProperty('--theme-secondary-color', themeSecondaryColor);
                document.documentElement.style.setProperty('--theme-undertone-color', themeUndertoneColor);
                document.documentElement.style.setProperty('--theme-su-color', themeSuColor);
                document.documentElement.style.setProperty('--theme-background-image', '/ecda/resources/images/zhu1.png');