One, development environment

  • Framework: the vue
  • CSS: less

Second, introduction

Recently, when dealing with business, I encountered a requirement that the front-end can change the color scheme of the website according to the return type of the interface. After thinking about it, there are many cases of color change in the market (such as: Vue-element-admin), but because my project is not very complex, so I plan to find a new plan to write a suitable project for my own and easy to understand.

Three, how to start?

1. Install less

$ npm install -g less

In addition to the global installation of less, we also need to use less. Min.js here to paste the address, you need to be able to download less

2. Configure your own theme color

Create a new themecolor.js file in the project’s tools folder and configure the color scheme

/* * @description: subject switch * @author: TQF * @date: 2021-6-29 16:55:06 * @lasteditors: TQF * @lastedittime: The 2021-7-03 14:44:27 * /
const lesscolor = {
  black: {
    '@nav_background': '#262F3E'.'@Sidebar_background': '#fff'.// The left background color
    '@Sidebar_active_background': '#F4F6FA'.// Select the background color
    '@Sidebar_text_color': '# 707070'.'@Sidebar_text_active': '#457BF7'.'@nav_text': '#bdc2c4'.'@nav_text_active': '#fff',},blue: {
    '@nav_background': '#0085FF'.'@Sidebar_background': '#E9F5FF'.'@Sidebar_active_background': '#D3EBFF'.'@Sidebar_text_color': '#424E67'.'@Sidebar_text_active': '#0085FF'.'@nav_text': '#b3daff'.'@nav_text_active': '#fff',}}// Export the method of changing the color
export async function changeThemeless(type = 'white') {
  const _lesscolor = lesscolor[type] || lesscolor['white']
  window.less && window.less.modifyVars(_lesscolor)
}

Copy the code

Add less.min.js to the public project and create a global CSS file, such as:

Let’s look at the contents of theme.css

@charset "utf-8";

@nav_background: #457BF7; // The background color.nav_color_mixin(@value, @type) when (@value =#457BF7), (@value =#0085FF), (@value =#262F3E) { @{type}: @value ! important; } .nav_color_mixin(@value, @type) when (default()) { @{type}: #457BF7 ! important; } @Sidebar_background: #E9F5FF;// The left background color
@Sidebar_active_background: #457BF7; // Select the background color
@Sidebar_text_color: #424E67; // Select the background color
@Sidebar_text_active: #424E67; // Select the background color
@nav_text: #bdc2c4; // Navigation font color
@nav_text_active: #fff; // The color of the navigation activation

@text_color_logo: #fff; // Logo text color
@text_color_logo_text: #fff; // Logo text color

@margin_top: 10px; // Top distance

// Top navigation section
// Top navigation background color._nav_theme_bg { background-color: @nav_background ! important; } ._nva_text_color {color: @nav_text_active ! important; } .nav { .el-menu-item {color: @nav_text ! important; &.is-active {color: @nav_text_active ! important; span { border-bottom: 2px solid @border_menu ! important; }}}}// Page configuration
.pagination-container {
  .el-pager li.active {
    color: #fff;
    .nav_color_mixin(@nav_background, background-color)
  }
}

Copy the code

The less attribute variable @nav_background is the same as the theme variable defined in the themecolor. js file, because the variable passed through the js file will replace the current attribute value, such as: The current theme. CSS configuration @nav_background is #457BF7

When calling themecolor. js, depending on the topic you are calling, such as the black color scheme, it will be replaced with ‘@nav_background’: ‘#262F3E’ under black.

We call the property defined by the corresponding less variable according to the class defined below: e.g

.nav {color: @nav_background! important; }Copy the code

Use the (.nav) class name in the page node to achieve a custom site color change.

This is just a simple description. You need to configure the class name according to the project, configure the defined less variable, and then call the corresponding variable based on the class name.

Four, how to use?

Generally, we need to change the site color value at the entry file to deal with, or given a selector, by the user to perform method changes.

We use it in app.vue

Five, the main technology used less (modifyVars)

ModifyVars According to the documentation, using modifyVars will render your base file at the end, which means it will overwrite any few files defined in it.

For details, see the less document less