vmo-skin

The vmo-skin is a Vue3 component skin manager that allows you to cover and replace the basic style of components using JSON configuration data. It enables dynamic management of component themes and details appearance. You can hot switch complex interface themes and achieve unified management. Additionally, it has expanded the directional style automatic generation function point for element-plus and can be extended for other component libraries.

Installation

You can install vmo-skin using npm by running the following command:

npm i vmo-skin --save

Usage Examples

To use vmo-skin, you can follow the examples provided by the component documentation or refer to the specific usage guidelines mentioned in the documentation. If you need further assistance or have specific questions regarding the usage of vmo-skin, feel free to ask!

// element-plus theme management
<script setup lang="ts">
import { ref, computed } from "vue";
import { ElInput, ElButton, ElSelect, ElTreeSelect, ElSwitch, ElSlider, ElCheckbox, ElInputNumber, ElRadio, ElAlert, ElMessage, ElMessageBox, ElColorPicker } from "element-plus";
import { VmoSkin, useGenerateElementPlusThemeCssVariables } from "vmo-skin";

const data = ref({
  stringContent:'',
  booleanContent:true,
  numberContent:0,
});
const colors = ref({
  primary:'#5279FF',
  warning:'#FFBE42',
  success:'#52C41A',
  info:'#AAAFB1',
  accent:'#F0FF00',
  danger:'#FF0000',
  error:'#FF0000',
})
const computedCssVariables = computed(()=>{
  return {
    pickedStepColors:[
      '--el-color-primary', 
      '--el-color-success', 
      '--el-color-warning', 
      '--el-color-danger', 
      '--el-color-info', 
      '--el-color-error'
    ],
    overwriteColors:{
      '--el-color-primary':colors.value.primary,
      '--el-color-warning':colors.value.warning,
      '--el-color-success':colors.value.success,
      '--el-color-info':colors.value.info,
      '--el-color-accent':colors.value.accent,
      '--el-color-danger':colors.value.error,
      '--el-color-error':colors.value.error,
      // '--el-color-primary':'#5279FF',
      // '--el-color-warning':'#FFBE42',
      // '--el-color-success':'#52C41A',
      // '--el-color-accent':'#F0FF00',
      // '--el-color-error':'#FF0000',

      '--el-message-close-icon-color':'#FFFFFF',

      // '--light-3':0.7,
      // '--light-9':0.95,
      '--dark-2':0.2,

      '--el-slider-size':'14px',

      '--el-border-color':"#E4E4E4",
      '--el-fill-color-light':"#e9e9f3",
      '--el-bg-color-overlay':"#FFFFFF",
      '--el-text-color-disabled':'#FF00FF',
      '--el-fill-color-blank':'#FDFDFF',

      '--el-componet-border-color-hover':'#BBBBBB',
      '--el-border-color-hover':'var(--el-componet-border-color-hover,var(--el-text-color-disabled))'
    },
    overwriteClass:{
      '.el-message-box':{
        padding:'0px',
        background:'#FFFFFF',
        overflow:'hidden',
      },
      '.el-message-box__header':{
        height:'50px',
        padding:'0px 20px 0px 20px !important',
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        backgroundColor:'var(--el-color-primary)',
        borderBottom:'1px solid #AAAABB55'
      },
      '.el-message-box__title':{
        color:'white',
        fontWeight:'normal',
        padding:'0px',
        display:'flex',
        flexDirection:'row',
        justifyItems:'center',
      },
      '.el-message-box__container':{
        margin:'10px 20px 10px 20px'
      },
      '.el-message-box__headerbtn':{
        color:'white',
        position:'inherit',
        width:'20px',
        height:'20px',
      },
      '.el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close':{
          color: 'var(--el-color-white)'
      },
      '.el-message-box__btns':{
        padding:'10px 20px 10px 20px',
        backgroundColor:'#88888811',
      },
      '.el-message-box__headerbtn .el-message-box__close':{
          color: 'var(--el-color-white)',
      },
      '.el-button':{
        borderRadius:'4px',
        transitionDuration:'0.1s',
      },
      '.el-button:hover':{
        borderRadius:'20px',
      },
      '.el-input-number__decrease':{
        backgroundColor:'var(--el-fill-color-light) /*aaaaa*/', 
      },
      '.el-input-number__increase':{
        backgroundColor:'var(--el-fill-color-light) /*aaaaa*/'
      },
      '.el-message':{
        // backgroundColor:'var(--el-color-white)'
      },
      '.el-slider__button':{
        border:'2px solid var(--el-color-primary-light-5)',
        width:'var(--el-slider-size,20px)',
        height:'var(--el-slider-size,20px)'
      }
    }
  }
});
// test message
function message(type:string,target:string='body'){
  ElMessage({
    type:type,
    message: 'Congrats, this is a success message.',
    duration: 0,
    appendTo: target,
    showClose:true,
  } as any)
};
// test message
function messageBox(target:string='body'){
  ElMessageBox({
    title:'TEST',
    message:'serefd',
    appendTo:target
  })
}
</script>

<template>
  <div class="flex flex-col grow-1 border-4 border-gray-400 p-10 flex-grow backdrop-blur-sm">
    <vmo-skin
      :themeid="data.stringContent"
      :namespace="data.booleanContent"
      class="themess p-2 border grow-1 my-[10px]"
      :css-properties="useGenerateElementPlusThemeCssVariables(computedCssVariables.pickedStepColors,computedCssVariables.overwriteColors,'lighten')"
      :overwrite-class="data.overwriteClass">
      <el-input v-model="data.stringContent" class="mb-[10px] last:mb-[0px]"></el-input>
      <el-select v-model="data.stringContent" class="mb-[10px] last:mb-[0px]"></el-select>
      <el-tree-select v-model="data.stringContent" :teleported='false' class="mb-[10px] last:mb-[0px]"></el-tree-select>
      <el-switch v-model="data.booleanContent" class="mb-[10px] last:mb-[0px]"></el-switch>
      <el-slider v-model="data.numberContent" size="small" class="mb-[10px] last:mb-[0px] px-[5px]"></el-slider>
      <el-checkbox v-model="data.booleanContent" class="mb-[10px] w-full last:mb-[0px]"></el-checkbox>
      <el-input-number v-model="data.numberContent"  class="mb-[10px] !w-full last:mb-[0px]"></el-input-number>
      <el-radio v-model="data.booleanContent"  class="mb-[10px] !w-full last:mb-[0px]"></el-radio>

      <el-button type="primary" plain class="w-1/6 !m-[5px] grow-1">primary</el-button>
      <el-button type="success" plain class="w-1/6 !m-[5px] grow-1" @click="message('success')">success</el-button>
      <el-button type="danger" plain class="w-1/6 !m-[5px] grow-1" @click="message('error','.themess')">danger</el-button>
      <el-button type="warning" plain class="w-1/6 !m-[5px] grow-1" @click="message('warning')">warning</el-button>
      <el-button type="info" plain class="w-1/6 !m-[5px] grow-1" @click="message('info')">info</el-button>
      <el-button type="primary" class="w-1/6 !m-[5px] grow-1" @click="messageBox()">primary</el-button>
      <el-button type="success" class="w-1/6 !m-[5px] grow-1" @click="messageBox()">success</el-button>
      <el-button type="danger" class="w-1/6 !m-[5px] grow-1" @click="messageBox('.themess')">danger</el-button>
      <el-button type="warning" class="w-1/6 !m-[5px] grow-1">warning</el-button>
      <el-button type="info" class="w-1/6 !m-[5px] grow-1">info</el-button>

      <el-alert title="Alert:this is a message" type='error' class="mb-[12px]"></el-alert>
      <el-alert title="Alert:this is a message" type='success' class="mb-[12px]"></el-alert>
      <el-alert title="Alert:this is a message" type='warning' class="mb-[12px]"></el-alert>
      <el-alert title="Alert:this is a message" type='info' class="mb-[12px]"></el-alert>
    </vmo-skin>
    <el-input></el-input>
    <div class="flex flex-row">
      <el-color-picker v-model="colors.primary"></el-color-picker>
      <el-color-picker v-model="colors.warning"></el-color-picker>
      <el-color-picker v-model="colors.success"></el-color-picker>
      <el-color-picker v-model="colors.info"></el-color-picker>
      <el-color-picker v-model="colors.danger"></el-color-picker>
      <el-color-picker v-model="colors.error"></el-color-picker>
      <el-color-picker v-model="colors.accent"></el-color-picker>
    </div>
    <!-- <vmo-skin
      themeid="thistime2"
      :namespace="true"
      class="p-2 border grow-1 my-[10px]"
      :css-properties="useGenerateElementPlusThemeCssVariables(computedCssVariables2.pickedStepColors,computedCssVariables2.overwriteColors,'alpha')"
      :overwrite-class="{
        '.el-button:hover':{
          borderRadius:'4px !important',
        },
      }">
      <el-input v-model="data.stringContent" class="mb-[10px] last:mb-[0px]"></el-input>
      <el-select v-model="data.stringContent" class="mb-[10px] last:mb-[0px]"></el-select>
      <el-tree-select v-model="data.stringContent" class="mb-[10px] last:mb-[0px]"></el-tree-select>
      <el-switch v-model="data.booleanContent" class="mb-[10px] last:mb-[0px]"></el-switch>
      <el-slider v-model="data.numberContent" size="small" class="mb-[10px] last:mb-[0px] px-[5px]"></el-slider>
      <el-checkbox v-model="data.booleanContent" class="mb-[10px] w-full last:mb-[0px]"></el-checkbox>
      <el-input-number v-model="data.numberContent"  class="mb-[10px] !w-full last:mb-[0px]"></el-input-number>
      <el-radio v-model="data.booleanContent"  class="mb-[10px] !w-full last:mb-[0px]"></el-radio>
      <el-button type="primary" plain class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="success" plain class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="danger" plain class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="warning" plain class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="info" plain class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="primary" class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="success" class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="danger" class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="warning" class="w-1/6 !m-[5px] grow-1">aaad</el-button>
      <el-button type="info" class="w-1/6 !m-[5px] grow-1">aaad</el-button>

      <el-alert title="Alert:this is a message" type='error' class="mb-[12px]"></el-alert>
      <el-alert title="Alert:this is a message" type='success' class="mb-[12px]"></el-alert>
      <el-alert title="Alert:this is a message" type='warning' class="mb-[12px]"></el-alert>
      <el-alert title="Alert:this is a message" type='info' class="mb-[12px]"></el-alert>
    </vmo-skin> -->
  </div>
</template>

<style>
html,body{
    height: 100%;
    display: flex;
    flex-grow: 1;
}
</style>

PROPS

themeid:string

This is the Style Theme ID. After instantiating vmo-skin, an ID is generated which acts as a tag for the style scope. This ID is used to manage the scope through configured override classes and styles. You can also specify a custom name for personalized settings. This name will be bound to the ID of the root DOM node of vmo-skin.

namespace:boolean

Indicates whether to abandon the scope. If enabled, it manages the scope for the content inside the vmo-skin <slot></slot>, including the classes added to the meta tag. In other words, combined with methods like appendTo, this can isolate themes within different vmo-skin containers in the same project. However, make sure to use this in conjunction with themeid to maintain a unique ID for each container. If disabled, the modifications by vmo-skin will default to global.

prefixer:string

This is the class prefix added by vmo-skin in the meta tag. The default is vmo-skin:, but you can change it to another name to avoid confusion with other styles.

cssProperties: Record<--${string},any>

These are the CSS variables that need to be overridden.

const customeCssVars = {
  '--el-color-primary':'#FF0000',
  '--el-color-danger':'#FF00FF',
  .....
}

overwriteClass: Record<string,StyleValue>

These are the classes that need to be re-overwritten.

const customeClass = {
  '.el-message-box':{
    padding:'0px',
    background:'#FFFFFF',
    overflow:'hidden',
  },
  '.el-message-box__header':{
    height:'50px',
    padding:'0px 20px 0px 20px !important',
    display:'flex',
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
    backgroundColor:'var(--el-color-primary)',
    borderBottom:'1px solid #AAAABB55'
  },
}

useGenerateElementPlusThemeCssVariables

In vmo-skin, the default styles for the element-plus theme can be dynamically generated, Here’s how you can achieve this:

useGenerateElementPlusThemeCssVariables(
  gradColors:string[]=[], // 需要渐进的颜色 ['--el-color-primary','--el-color-danger',...], 列在此数组中的颜色变量名称，将会被重新计算其渐进色
  vars:Partial<ElementPlusThemeCssVariables & CustomeElementPlusCssVariables & Record<string,any>>, // 需要覆盖的 css 变量
  mode?:ColorMode // 渐进色生成模式 'alpha'|'darken'|'lighten'
)