基于element-ui的主题切换

vue2.x基于的UI组件库为element2.x版本的，但是这个版本的UI库不支持深浅色和主题配置

效果图

实现功能

• 支持了深/浅模式切换
• 支持配置主色/圆角/阴影
• 支持自定义组件等

主题的下载

主题的变量切换主要是基于css的var变量来实现，通过更换变量的值来达到不同效果。 theme.css

:root,
:root[theme-mode='light'] {
    --color-primary-hue-1: #E1F8FA;
    --color-primary-hue-2: #AFE9ED;
    --color-primary-hue-3: #82DAE0;
    --color-primary-hue-4: #59CCD4;
    --color-primary-hue-5: #34BDC7;
    --color-primary-hue-6: #13AFBA;
    --color-primary-hue-7: #078B94;
    --color-primary-hue-8: #00676E;
    --color-primary-hue-9: #004247;
    --color-primary-hue-10: #001F21;
    ...
   }
   :root[theme-mode='dark'] {
    --color-primary-hue-1: #E1F8FA;
    --color-primary-hue-2: #AFE9ED;
    --color-primary-hue-3: #82DAE0;
    --color-primary-hue-4: #59CCD4;
    --color-primary-hue-5: #34BDC7;
    --color-primary-hue-6: #13AFBA;
    --color-primary-hue-7: #078B94;
    --color-primary-hue-8: #00676E;
    --color-primary-hue-9: #004247;
    --color-primary-hue-10: #001F21;
    ...
   }