Nonstop Perpetual Motion

    @yzfe/element-ui-var-themes

    1.0.6 • Public • Published

    Element UI css 变量主题

    步骤

    • 编写 color-map.scss, sass 变量对应颜色的样式
    • 生成 sass 变量对应颜色的 color-map.scss -> color-map.css 和主题样式
    • 根据 color-map 生成 css 变量颜色的 map (colorMapData)
    • 使用 colorMapData 将主题颜色替换成 css 变量
    • 清理临时文件

    命令

    yarn build

    使用方式

    可以通过 npm 安装,并引入

    yarn add @yzfe/element-ui-var-themes
    // 2.4.11 版本
    import '@yzfe/element-ui-var-themes/dist/2.4.11/index.css'
    // 2.10.1 版本
    import '@yzfe/element-ui-var-themes/dist/2.10.1/index.css'

    也可以通过 cdn link 的方式

    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@yzfe/element-ui-var-themes@1.0.0/dist/2.10.1/index.css"
    />

    修改 css 变量

    Element UI 默认的颜色已经抽离成 css 变量,定义在 :root(也就是 html) 元素那里,可以通过控制台看到可以自定义的变量。全局修改方式是在 body 中重置变量的值。也可以在任意组件中修改这个变量。

    body {
        --el-color-primary: red;
    }

    Keywords

    none

    Install

    npm i @yzfe/element-ui-var-themes

    DownloadsWeekly Downloads

    5

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    894 kB

    Total Files

    11

    Last publish

    Collaborators

    • allenice
    • allenmo
    • vfasky