dm-vue3-ui/lib/utils/theme.js

This Components Library will help get you started developing in Vue 3.

"use strict";var t=Object.defineProperty,e=(e,n,r)=>(((e,n,r)=>{n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r})(e,"symbol"!=typeof n?n+"":n,r),r);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=class t{constructor(){e(this,"currentTheme"),e(this,"originalTheme"),e(this,"themeConfigs",{default:{primaryColor:"#7858fc",borderRadius:"4px",borderColor:"rgba(147, 154, 189, 0.5)"},blue:{primaryColor:"#2468f2",borderRadius:"4px",borderColor:"rgba(147, 154, 189, 0.5)"}}),this.originalTheme=this.themeConfigs.default,this.currentTheme={...this.originalTheme}}static getInstance(){return t.instance||(t.instance=new t),t.instance}applyTheme(t){this.currentTheme={...this.currentTheme,...t},this.updateCSSVariables(),this.updateAntdThemeVariables(),this.injectDynamicStyles()}applyThemeByType(t){const e=this.themeConfigs[t];return e&&this.applyTheme(e),e}getThemeOptions(){return[{value:"default",name:"默认",color:this.themeConfigs.default.primaryColor,config:this.themeConfigs.default},{value:"blue",name:"蓝色",color:this.themeConfigs.blue.primaryColor,config:this.themeConfigs.blue}]}resetTheme(){this.currentTheme={...this.originalTheme},this.applyTheme(this.currentTheme)}initializeTheme(){const t=localStorage.getItem("platform_config");if(t)try{const e=JSON.parse(t);e.themeColor&&this.applyTheme({primaryColor:e.themeColor})}catch(e){}}getCurrentTheme(){return{...this.currentTheme}}updateCSSVariables(){const t=document.documentElement,{primaryColor:e,borderRadius:n,borderColor:r}=this.currentTheme;t.style.setProperty("--primary-color",e),t.style.setProperty("--primary-color-hover",this.adjustColorBrightness(e,20)),t.style.setProperty("--primary-color-active",this.adjustColorBrightness(e,-20)),t.style.setProperty("--primary-color-fade",this.hexToRgba(e,.08)),n&&t.style.setProperty("--border-radius-base",n),r&&t.style.setProperty("--border-color-base",r)}updateAntdThemeVariables(){const t=document.documentElement,{primaryColor:e}=this.currentTheme;t.style.setProperty("--ant-primary-color",e),t.style.setProperty("--ant-primary-color-hover",this.adjustColorBrightness(e,20)),t.style.setProperty("--ant-primary-color-active",this.adjustColorBrightness(e,-20));for(let n=1;n<=10;n++){const r=6===n?0:10*(6-n),o=this.adjustColorBrightness(e,r);t.style.setProperty(`--ant-primary-${n}`,o)}t.style.setProperty("--ant-primary-color-deprecated-bg",this.hexToRgba(e,.1)),t.style.setProperty("--ant-primary-color-deprecated-border",this.hexToRgba(e,.4))}injectDynamicStyles(){const t=document.getElementById("dynamic-theme-styles");t&&t.remove();const e=document.createElement("style");e.id="dynamic-theme-styles";const{primaryColor:n}=this.currentTheme,r=`\n      /* 兼容vite.config中customTheme的样式覆盖 */\n      /* 按钮样式 */\n      .dm-ui-btn,\n      .ant-btn {\n        &:hover, &:focus {\n          border-color: ${n} !important;\n          color: ${n} !important;\n        }\n      }\n\n      .dm-ui-btn-primary,\n      .ant-btn-primary {\n        color: #fff !important;\n        background-color: ${n} !important;\n        border-color: ${n} !important;\n      }\n      \n      .dm-ui-btn-primary:hover,\n      .ant-btn-primary:hover {\n        color: #fff !important;\n        background-color: ${this.adjustColorBrightness(n,20)} !important;\n        border-color: ${this.adjustColorBrightness(n,20)} !important;\n      }\n      .dm-ui-btn-primary:active,\n      .dm-ui-btn-primary:focus,\n      .ant-btn-primary:active,\n      .ant-btn-primary:focus {\n        color: #fff !important;\n        background-color: ${this.adjustColorBrightness(n,-20)} !important;\n        border-color: ${this.adjustColorBrightness(n,-20)} !important;\n      }\n      \n      /* 链接样式 */\n      .dm-ui-btn-link,\n      .ant-btn-link {\n        color: ${n} !important;\n      }\n      \n      .dm-ui-btn-link:hover,\n      .ant-btn-link:hover {\n        color: ${this.adjustColorBrightness(n,20)} !important;\n      }\n      \n      /* 输入框焦点样式 */\n      .dm-ui-input:hover,\n      .dm-ui-input:focus,\n      .dm-ui-input-focused,\n      .dm-ui-input-number:hover,\n      .ant-input:hover,\n      .ant-input:focus,\n      .ant-input-focused {\n        border-color: ${n} !important;\n        box-shadow: 0 0 0 2px ${this.hexToRgba(n,.2)} !important;\n      }\n      \n      /* 选择器样式 */\n      .dm-ui-select-focused .dm-ui-select-selector,\n      .ant-select-focused .ant-select-selector {\n        border-color: ${n} !important;\n        box-shadow: 0 0 0 2px ${this.hexToRgba(n,.2)} !important;\n      }\n      .dm-ui-select:not(.dm-ui-select-disabled):hover .dm-ui-select-selector,\n      .ant-select:not(.ant-select-disabled):hover .ant-select-selector {\n        border-color: ${this.adjustColorBrightness(n,20)} !important;\n      }\n      .dm-ui-select-item-option-selected:not(.dm-ui-select-item-option-disabled),\n      .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {\n        color: #fff !important;\n        background-color:${this.adjustColorBrightness(n,20)} !important;\n      }\n      /* 复选框样式 */\n      .dm-ui-checkbox-checked .dm-ui-checkbox-inner,\n      .ant-checkbox-checked .ant-checkbox-inner {\n        background-color: ${n} !important;\n        border-color: ${n} !important;\n      }\n      .dm-ui-checkbox:hover,\n      .ant-checkbox:hover {\n        border-color: ${this.adjustColorBrightness(n,20)} !important;\n      }\n      /* 单选框样式 */\n      .dm-ui-radio-checked .dm-ui-radio-inner,\n      .ant-radio-checked .ant-radio-inner {\n        border-color: ${n} !important;\n      }\n      \n      .dm-ui-radio-checked .dm-ui-radio-inner::after,\n      .ant-radio-checked .ant-radio-inner::after {\n        background-color: ${n} !important;\n      }\n      .dm-ui-radio-button-wrapper-checked, .dm-ui-radio-button-wrapper:hover {\n        background: ${n} !important;\n        border-color: ${n} !important;\n        color: #fff !important;\n      }\n      /* 开关样式 */\n      .dm-ui-switch-checked,\n      .ant-switch-checked {\n        background-color: ${n} !important;\n      }\n      .dm-ui-picker:hover, .dm-ui-picker-focused, .dm-ui-picker-cell-in-view.dm-ui-picker-cell-today .dm-ui-picker-cell-inner::before {\n        border-color: ${n} !important;\n        box-shadow: 0 0 0 2px ${this.hexToRgba(n,.2)} !important;\n      }\n      .dm-ui-picker-cell-in-view.dm-ui-picker-cell-in-range::before, .dm-ui-picker-time-panel-cell-selected .dm-ui-picker-time-panel-cell-inner {\n        background: ${this.hexToRgba(n,.1)} !important;\n      }\n      .dm-ui-picker-cell-range-start, .dm-ui-picker-cell-range-end {\n        .dm-ui-picker-cell-inner {\n          background: ${n} !important;\n        }\n      }\n      /* 标签页样式 */\n      .dm-ui-tabs-tab-active,\n      .dm-ui-tabs-tab:active,\n      .ant-tabs-tab-active,\n      .ant-tabs-tab:active {\n        color: ${n} !important;\n      }\n      .dm-ui-tabs-tab:hover,\n      .ant-tabs-tab:hover {\n        color: ${this.adjustColorBrightness(n,20)} !important;\n      }\n      .dm-ui-tabs-ink-bar,\n      .ant-tabs-ink-bar {\n        background-color: ${n} !important;\n      }\n      \n      /* 菜单样式 */\n      .dm-ui-menu-item-selected,\n      .dm-ui-menu-item:active,\n      .ant-menu-item-selected,\n      .ant-menu-item:active,\n       {\n        background-color: ${this.hexToRgba(n,.1)} !important;\n        color: ${n} !important;\n      }\n      .dm-ui-menu-item:hover,\n      .ant-menu-item:hover {\n        color: ${n} !important;\n      }\n      \n      /* 分页器样式 */\n      .dm-ui-pagination-item-active,\n      .ant-pagination-item-active {\n        background-color: ${n} !important;\n        border-color: ${n} !important;\n      }\n      \n      .dm-ui-pagination-item-active a,\n      .ant-pagination-item-active a {\n        color: #fff !important;\n      }\n      \n      /* 滑块样式 */\n      .dm-ui-slider-track,\n      .ant-slider-track {\n        background-color: ${n} !important;\n      }\n      \n      .dm-ui-slider-handle,\n      .ant-slider-handle {\n        border-color: ${n} !important;\n      }\n      \n      /* 日期选择器预设样式 */\n      .dm-ui-tag {\n        &:hover, &.active-tag {\n          background-color: ${this.adjustColorBrightness(n,20)} !important;\n          color: #fff !important;\n        }\n      }\n    `;e.textContent=r,document.head.appendChild(e)}adjustColorBrightness(t,e){const n="#"===t[0],r=n?t.slice(1):t,o=parseInt(r,16);let i=(o>>16)+e,a=(o>>8&255)+e,s=(255&o)+e;return i=i>255?255:i<0?0:i,a=a>255?255:a<0?0:a,s=s>255?255:s<0?0:s,(n?"#":"")+(i<<16|a<<8|s).toString(16).padStart(6,"0")}hexToRgba(t,e){return`rgba(${parseInt(t.slice(1,3),16)}, ${parseInt(t.slice(3,5),16)}, ${parseInt(t.slice(5,7),16)}, ${e})`}};e(n,"instance");let r=n;const o=r.getInstance();exports.ThemeManager=r,exports.themeManager=o;