Element-ui skin change function
Step 1 Install the Element-UI custom theme plugin
npm i element-theme-chalk -D
npm i element-theme -S
Copy the codeCreate a folder SCSS -temp in the Assets folder. Copy the contents of the SCSS folder in the Assets folder and paste them to the SCSS -temp folder
Step 2 Install gulp-related plug-ins
npm i gulp-cli -g
npm i gulp-autoprefixer gulp-clean-css gulp-load-plugins gulp-rename gulp-sass -D
Copy the codeStep 3 Create a gulpfile.js file in the following directory. For those unfamiliar with the API, take a look at the official gulp documentation. The following for gulpfile. Js
var gulp = require("gulp");
var$=require("gulp-load-plugins") ();var fs = require("fs");
var path = require("path");
var del = require("del");
//var colors = require('colors')
var child_process = require("child_process");
var theme = {};
var themeList = require("./src/element-ui/config.js").filter(
(item) = >! item.hasBuild );var styleFileDir = "./src/assets/scss";
var styleFileDirTemp = `${styleFileDir}-temp`;
var themeFileDir = "./public/element-theme";
var et = require("element-theme");
var etOptions = require("./package.json") ["element-theme"];
var themeFileName = etOptions.config.replace(/.*\/(.+\.scss)/."$1");
/** * Build build theme */
gulp.task("themes".() = > {
/ / the console. The log (colors. Green (' -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- building, theme = = = = = = = = = = = = = -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- '))
if (themeList.length <= 0) {
return del(styleFileDirTemp);
}
// Delete temporary files to ensure normal operation
//del(styleFileDirTemp)
// Make a copy of the SCSS style folder as a temporary processing folder for your build
//child_process.spawnSync('cp', ['-r', styleFileDir, styleFileDirTemp])
// Copy the ELEMENT component SCSS variable style file to the temporary processing folder and modify the corresponding configuration information
//child_process.spawnSync('cp', ['-r', etOptions.config, styleFileDirTemp])
etOptions.config = `${styleFileDirTemp}/${themeFileName}`;
// Start building build
fnCreate(themeList);
function fnCreate(themeList) {
if (themeList.length >= 1) {
// Save the theme object generated by the current build
theme = themeList[0];
console.log("\n");
/ / the console. The log (colors. Green (' -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to be built, the theme -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- '))
console.log(themeList);
console.log("\n");
. / / the console log (colors. Green (' -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- in the building, theme -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- '))
console.log(theme);
console.log("\n");
// Change the value of the $--color-primary theme variable in the.scss temporary file
var data = fs.readFileSync(etOptions.config, "utf8");
var result = data.replace(
/\$--color-primary:(.*) ! default; /.`$--color-primary:${theme.color}! default; `
);
fs.writeFileSync(path.resolve(etOptions.config), result);
// Modify aui. SCSS temporary file to introduce element component theme variable file path
var data = fs.readFileSync(`${styleFileDirTemp}/aui.scss`."utf8");
var result = data.replace(
new RegExp(`(@import \")(.*\/)(${themeFileName}\ "); `),
"$1 / $3"
);
fs.writeFileSync(path.resolve(`${styleFileDirTemp}/aui.scss`), result);
// Call the elder-theme plugin to generate the Element component theme
etOptions.out = `${themeFileDir}/${theme.name}`;
et.run(etOptions, () = > {
// Create the aui.css project theme with the same theme color
gulp.start(["styles"].() = > {
// Recursive next step
themeList.splice(0.1);
fnCreate(themeList);
});
});
} else {
// Delete temporary files
del(styleFileDirTemp);
console.log("\n");
/ / the console. The log (colors. Green (' -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- build, delete temporary files -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- '))
console.log(styleFileDirTemp);
console.log("\n");
// Delete some files that are not needed by the topic
var files = [
`${themeFileDir}/**/*.css`.`!${themeFileDir}/**/index.css`.`!${themeFileDir}/**/aui.css`.`!${themeFileDir}/**/fonts`,]; del(files);. / / the console log (colors. Green (' -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- build, delete the theme independent component files -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- '))
console.log(files);
console.log("\n"); }}}); gulp.task("styles".() = > {
return gulp
.src([`${styleFileDirTemp}/aui.scss`])
.pipe($.sass().on("error", $.sass.logError))
.pipe(
$.autoprefixer({
browsers: etOptions.browsers,
cascade: false,
})
)
.pipe($.cleanCss())
.pipe($.rename("aui.css"))
.pipe(gulp.dest(`${themeFileDir}/${theme.name}`));
});
Copy the codeThe fourth step
① Add the following command to the scripts property of package.json
"et": "node_modules/.bin/et"."et:init": "node_modules/.bin/et -i"."et:list": "gulp themes"
Copy the code② Run the command
npm run et:init
Copy the codeA [element-variable. SCSS] file is generated in the project root directory
③ Create an element-UI folder in the SRC folder, move [element-variable. SCSS] into the element-ui folder, and change the file name to “theme- variable. SCSS”
④ Create a config.js file in the Element-UI folder and type in the theme colors you want, as shown below
/* eslint-disable */
/** * Topic configuration information ** Has hasBuild been built? * true: built and will not be built * false: not built and will be built automatically after the command is executed
module.exports = [
{ name: "default".color: "#409EFF".desc: "Default color".hasBuild: false },
{ name: "cyan".color: "#0BB2D4".desc: "Blue".hasBuild: false },
{ name: "blue".color: "#3E8EF7".desc: "Blue".hasBuild: false },
{ name: "green".color: "#11C26D".desc: "Green".hasBuild: false },
{ name: "turquoise".color: "#17B3A3".desc: "Turquoise".hasBuild: false },
{ name: "indigo".color: "#667AFA".desc: "Indigo".hasBuild: false },
{ name: "brown".color: "#997B71".desc: "Brown".hasBuild: false },
{ name: "purple".color: "#9463F7".desc: "Purple".hasBuild: false },
{ name: "gray".color: "# 757575".desc: "Gray".hasBuild: false },
{ name: "orange".color: "#EB6709".desc: "Orange".hasBuild: false },
{ name: "pink".color: "#F74584".desc: "Pink".hasBuild: false },
{ name: "yellow".color: "#FCB900".desc: "Yellow".hasBuild: false },
{ name: "red".color: "#FF4C52".desc: "Red".hasBuild: false},];Copy the code⑤ Add element-theme to package.json
"element-theme": {
"config": "./src/element-ui/theme-variables.scss"."out": "./src/element-ui/theme"."minimize": true."browsers": [
"1%" >."last 2 versions"."not ie <= 10"]}Copy the codeCreate the element-theme folder in the public folder
⑦ Run the following command to run the code in gulpfile.js
npm run et:list
Copy the codeModify the theme color
Modify/SRC/assets/SCSS/variables – theme. SCSS file
— color-primary: blue ! default; Save. You will immediately see the background of the main entrance layout change to blue in the browser
Open another terminal command line to switch to the project root directory and run the NPM run et command.
Use in components
<template>
<div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
<div class="aui-theme-tools__toggle" @click="isOpen = ! isOpen">
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
</div>
<div class="aui-theme-tools__content">
<div class="aui-theme-tools__item">
<h3>Navbar</h3>
<el-checkbox v-model="$store.state.navbarLayoutType" true-label="colorful">Colorful bright</el-checkbox>
</div>
<div class="aui-theme-tools__item">
<h3>Sidebar</h3>
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark">Dark black</el-checkbox>
</div>
<div class="aui-theme-tools__item">
<h3>Theme</h3>
<el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
<el-radio v-for="item in themeList" :key="item.name" :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
</el-radio-group>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
isOpen: false.themeList: require('@/element-ui/config.js'),
themeColor: 'default'}},methods: {
themeColorChangeHandle (val) {
var styleList = [
{
id: 'J_elementTheme'.url: `${process.env.BASE_URL}element-theme/${val}/index.css? t=The ${new Date().getTime()}`
},
{
id: 'J_auiTheme'.url: `${process.env.BASE_URL}element-theme/${val}/aui.css? t=The ${new Date().getTime()}`}]for (var i = 0; i < styleList.length; i++) {
var el = document.querySelector(` #${styleList[i].id}`)
if (el) {
el.href = styleList[i].url
continue
}
el = document.createElement('link')
el.id = styleList[i].id
el.href = styleList[i].url
el.rel = 'stylesheet'
document.querySelector('head').appendChild(el)
}
}
}
}
</script>
Copy the code