Vue + element UI custom theme, custom theme switching

There is no need to say more about this. I will say more about the middle pit below~

Small black box (command window, hereinafter referred to as small black box) execution

npm i element-theme -g npm i element-theme-chalk -D

  Small black box execution

et -i element-variables.scss

After success, the following prompt is displayed

> ✔ Generator variables file

After successful execution, the current directory (mine is under the root directory) will have a   element-variables.scss   File. The internal contains all variables used by the topic, which are defined in the format of SCSS. The general structure is as follows:

// element-variables.scss file $--color-primary: #409EFF !default; $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-success: #67c23a !default; $--color-warning: #e6a23c !default; $--color-danger: #f56c6c !default; $--color-info: #909399 !default; ...

Hey, hey, it's here that I started to run continuously ~ ~ ~ report an error after executing et

Cause: the computer prevents the execution of untrusted scripts. To put it bluntly, I just don't have this permission.

Solution: use the win key to search windows PowerShell directly and run it as an administrator

Execute after opening the window:

set-ExecutionPolicy RemoteSigned

The following message appears:

Execute policy changes Execution policies help you prevent untrusted scripts from executing. Changing the execution policy may create security risks, such as https:/go.microsoft.com/fwlink/?LinkID=135170 Medium about_Execution_Policies The help topic describes. Do you want to change the execution policy? [Y] yes(Y) [A] All(A) [N] no(N) [L] All no(L) [S] suspend(S) [?] help (The default value is“ N"):

Select Y and press enter to view:

// Check for success get-ExecutionPolicy

The following message appears:

// Prompt after success RemoteSigned

At this time, go to the command window again to execute et, and the problem is solved

Direct editing   element-variables.scss   For example, change the theme color to red.

// element-variables.scss file $--color-primary: red;

Small black box execution

et

After success, you will be prompted as follows, and a theme folder (at the same level as src) will also be generated in the root directory

> ✔ build theme font > ✔ build element theme

Introduced in main.js

import '../theme/index.css'

The previous element css style is no longer needed

// There's no need to introduce this import 'element-ui/lib/theme-chalk/index.css';

That's it. In fact, it's done without switching the theme. Let's start the steps of switching the theme

This plug-in is also the first time I use it. It seems that I don't understand it, and then I can't understand it~~~

Small black box execution:

// There's a pit here. I stepped on it at the back. Maybe some little friends don't have a pit npm install gulp npm install gulp-clean-css npm install gulp-css-wrap

If you can't create a file (don't ask, I'm also confused. I won't create this file for you directly 😶)， You can try cnpm

Copy in file:

// gulpfile.js var path = require('path') var gulp = require('gulp') var cleanCSS = require('gulp-clean-css') var cssWrap = require('gulp-css-wrap') gulp.task('css-wrap', function () { return gulp.src(path.resolve('./theme/index.css')) /* Find the css file that needs to add namespace and support regular expressions */ .pipe(cssWrap({ // This. custom-02abfd is equivalent to the class to be added to the body selector: '.custom-02abfd' /* Added namespace */ })) .pipe(cleanCSS()) .pipe(gulp.dest('src/assets/css/theme/02abfd')) /* Directory of storage */ })

Small black box execution:

gulp css-wrap

If an error is reported, execute in a small black box (this is how I solve it):

npm install gulp -g

Will be generated in   src/assets/css/theme/02abfd, and then copy a copy of the fonts file under the theme file generated in step 5 to   02abfd file

// store/index.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { themeColor: "3baaa3" }, mutations: { //Update theme colors setThemeColor(state, curColor) { state.themeColor = curColor; } }, actions: {}, modules: {} });

import "./assets/css/theme/3baaa3/index.css"; //Postal savings green

// Skin change plus class function export function toggleClass(element, className) { if (!element || !className) { return; } element.className = className; }

// script tag import { toggleClass } from "../utils/index"; mounted() { toggleClass(document.body, "custom-" + this.themecolor); let curcolor = this.$store.state.themeColor; }, computed: { themecolor: { get() { return this.$store.state.themeColor; }, set(val) { this.$store.commit("setThemeColor", val); } } }, watch: { themecolor: { handler() { toggleClass(document.body, "custom-" + this.themecolor); } } }

Switch different colors according to the value of themecolor

Before switching colors, repeat steps 4, 5 and 8 (change the class name and the directory where the files are stored), 9 and 11 (import all the style files to be imported and coexist)

Finally: some plug-ins still report errors after downloading. You can try cnpm. Sometimes it's strange. Mine appears, but I forgot which step to use cnpm

26 November 2021, 19:31 | Views: 3870