ElementUI CSS Variables

Change el scss variables to css.

Theme Generator & Preview.

The library use color-mix css function, there is a certain compatibility, it is fully supported in 2023.

Usage

npm i el-css-var

Instead of element-ui styles.

import SCSS

// main.ts

// old
import 'element-ui/packages/theme-chalk/src/index.scss'; 

// new
import 'el-css-var/dist/index.scss'; 
import 'el-css-var/dist/dark.scss'; // optional

And use scss variables:

@use 'el-css-var/dist/common/var.scss';

.container {
  color: var.$color-primary;
}

import CSS

// main.ts

// old
import 'element-ui/packages/theme-chalk/lib/index.css'; 

// new
import 'el-css-var/dist/index.css'; 
import 'el-css-var/dist/dark.css'; // optional

Custom Theme

Support use CSS variables and JS API to custom theme.

CSS variables

// index.scss
@import "el-css-var/dist/index.css";

:root {
  --color-primary: red;
}

SCSS variables

// index.scss
@forward "el-css-var/dist/index.scss" with (
  $font-path: '~el-css-var/dist/fonts',
  $color-primary: red,
);

JS API

Support global and component.

Global Theme

<script>
import { useElTheme } from 'el-css-var';

export default {
  mounted() {
    const elTheme = useElTheme();

    elTheme.updateTheme({
      base: {
        '--color-primary': 'red',
      }
    });
  }
}
</script>

Component Theme

<template>
  <div :style="style">
    <el-button>Custom Theme</el-button>
  </div>
</template>

<script>
import { useElThemeComponent } from 'el-css-var';

export default {
  setup() {
    const { style, updateTheme } = useElThemeComponent();

    updateTheme({
      '--color-primary': 'red'
    })
    
    return {
      style
    }
  }
}
</script>

Variables

These variables can all use in css var.

// Generate by v2-generate.js
export const DEFAULT_THEME = {
  '--color-text-white': '#FFFFFF',
  '--color-primary': '#409EFF',
  '--color-white': '#FFFFFF',
  '--color-black': '#000000',
  '--color-success': '#67C23A',
  '--color-warning': '#E6A23C',
  '--color-danger': '#F56C6C',
  '--color-info': '#909399',
  '--color-text-primary': '#303133',
  '--color-text-regular': '#606266',
  '--color-text-secondary': '#909399',
  '--color-text-placeholder': '#C0C4CC',
  '--border-color-base': '#DCDFE6',
  '--border-color-light': '#E4E7ED',
  '--border-color-lighter': '#EBEEF5',
  '--border-color-extra-light': '#F2F6FC',
  '--background-color-base': '#F5F7FA',
  '--font-color-disabled-base': '#bbb',
  '--icon-color': '#666',
  '--checkbox-disabled-input-fill': '#edf2fc',
  '--select-multiple-input-color': '#666',
  '--select-dropdown-empty-color': '#999',
  '--message-background-color': '#edf2fc',
  '--cascader-tag-background': '#f0f2f5',
  '--datepicker-inner-border-color': '#e4e4e4',
  '--datepicker-cell-hover-color': '#fff',
  '--calendar-selected-background-color': '#F2F8FE',
  '--avatar-font-color': '#fff',
  '--avatar-background-color': '#C0C4CC',
  '--descriptions-item-bordered-label-background': '#fafafa',
  '--skeleton-color': '#f2f2f2',
  '--skeleton-to-color': '#e6e6e6',
  '--svg-monochrome-grey': '#DCDDE0',
};

export const DARK_THEME = {
  '--color-white': '#1b1b1f',
  '--color-black': '#A2A3A4',
  '--color-text-primary': '#e8eaed',
  '--color-text-regular': '#CBCCCC',
  '--color-text-secondary': '#A2A3A4',
  '--color-text-placeholder': '#898989',
  '--border-color-base': '#434343',
  '--border-color-light': '#484848',
  '--border-color-lighter': '#535353',
  '--border-color-extra-light': '#585858',
  '--background-color-base': '#282a2d',
  '--message-background-color': '#282a2d',
  '--datepicker-inner-border-color': '#6D6F70',
  '--datepicker-cell-hover-color': '#6D6F70',
};

Migration

Some syntax migration.

mix

If you use scss mix function, you need to replace to color-mix:

@use "el-css-var/dist/common/var.scss";

.test {
  color: mix(var.$color-primary, white, 50%); 
  color: color-mix(in srgb, var.$color-primary, white 50%); 
}