“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

  • Preview effect online
  • Git repository address
  • This article skin implementation idea is still, manually customize multiple sets of themes, and then dynamic switch, with vue + Element-UI dynamic theme and website skin 2021, test available!! Similar.

The environment

  • System win10 64
  • The node version v15.12.0
  • “Vue” : “^ 3.0.0”
  • “Element – plus”, “^ 1.2.0 – beta. 3”

Fast theme switching

  • The main implementation is divided into two parts: 1. Obtain the theme file. 2.

Get the theme file

  • The file content is too long, copy from the sample repositoryClick on the openOr copy the repository directlythemes.jsFile into the project.

  • Of course, not all CSS variables need to be changed, so this article is an educational article so all variables are stored (available). Personal according to the actual situation for deletion and retention!!

Switch theme implementation

  • The place in the project that controls topic switching is introduced as captured above themes.js(Of course your file name is not this please use the actual) theme file.
  • The author has placedsrc -> utils -> themes.jsDirectory, so the import path isimport themes from '@/utils/themes'.
  • throughSwitchTheme functionTo control topic switching
switchTheme(type) {
  // Get different topic data according to different topic types
  The themes object contains defaultTheme and darkTheme, the defaultTheme and darkTheme
  // Import themes from '@/utils/themes' '
  type = type || 'darkTheme'
  const colorObj = themes[type]

  // Get basic colors
  // colorMix is a function
  for (let i = 1; i < 10; i += 1) {
    colorObj[`--el-color-primary-light-The ${10 - i}`] = colorMix(colorObj['--el-color-white'], colorObj['--el-color-primary'], i * 0.1)}// Set CSS variables
  Object.keys(colorObj).map(item= > {
    document.documentElement.style.setProperty(item, colorObj[item])
  })
}
Copy the code
  • ColorMix functionThe repository example is insrc -> utils -> tool.jsThe export.
const colorMix = (color1, color2, weight) = > {
  weight = Math.max(Math.min(Number(weight), 1), 0)
  let r1 = parseInt(color1.substring(1.3), 16)
  let g1 = parseInt(color1.substring(3.5), 16)
  let b1 = parseInt(color1.substring(5.7), 16)
  let r2 = parseInt(color2.substring(1.3), 16)
  let g2 = parseInt(color2.substring(3.5), 16)
  let b2 = parseInt(color2.substring(5.7), 16)
  let r = Math.round(r1 * (1 - weight) + r2 * weight)
  let g = Math.round(g1 * (1 - weight) + g2 * weight)
  let b = Math.round(b1 * (1 - weight) + b2 * weight)
  r = ("0" + (r || 0).toString(16)).slice(-2)
  g = ("0" + (g || 0).toString(16)).slice(-2)
  b = ("0" + (b || 0).toString(16)).slice(-2)
  return "#" + r + g + b;
}
Copy the code

Some questions about theme switching

Where do you get the CSS variables to switch themes?

  • Open the official elementPlus-UI website f12 to review elements. Take all CSS variables.

How do I know what these CSS variables are for?

  • You can guess some of them from the CSS variable names. The rest can be compared through the Element-UI online theme preview!!

  • You can switch to different components and styles for customization

What is fetching basic colors in the switchTheme function?

  • Is the picture of the variable, control such as navmenu navigation hover background color…

How to quickly generate preview themes?

  • It was observed that the main color variable names did not change much.
  • You can still configure it through the Element-UI online theme preview and find the replacement implementation manually, or you can iterate through the build!!

Site changes synchronously with theme colors

  • Use the CSS variable of the theme to change the color within the project as follows:

Refer to the article

  • Vue3 Element-Plus dynamic theme change simple implementation

The articles

  • Openlayers Offline map
  • These two front-end download libraries are recommended for you
  • Vue3 JSX starts from scratch
  • Vue3.0 combat pits
  • Touch hands to configure global loading in the project
  • Vue implements site peels -CSS variables
  • Element-ui custom theme
  • Vue + Element – UI Dynamic theme and website skin 2021, beta available!!

Everyone here is a little fairy, handsome than you have no opinion?

  • Last topic switch article collection than the point of praise more outrageous ！！！！！
  • There are questions about the article, welcome to comment!