“This is the third day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Click on the title to preview the theme switch

  • Git repository address click to view
  • The idea is to customize multiple sets of Element-UI themes, then dynamically change the Link href style file to achieve, and finally combine CSS variables to achieve the overall site skin.
  • ArcoDesign is singled out for its own dark theme and ease of switching. However, only VUE3 is supported.
  • Having said that, elemental-Plus has been updated for a long time and the online customization theme is still not ready (2021-11-08), So this article does not apply to Elder-Plus (elder-Plus seems to have rewritten some of the styles so using the elder-UI style directly can be problematic 🤐).

Project environment

  • The system of win
  • vue-cli3.x
  • Element – UI: “^ 2.14.1”
  • Vue: “^ 2.6.11.” “

Element-ui custom theme

  • The whole element-UI skin needs to be customized according to your needs. It is recommended to check the section about custom themes in the official documentation, which describes the official tools for customizing themes.
  • We used the Element-UI online theme generation tool to customize the theme, as described in this article

Dynamically switch themes

  • As a result, any theme that dynamically sets el (element-UI for short) requires dynamic CSS switching. Of course I classify dynamically changing SASS variables as dynamically switching CSS.

Copy the style file to the static file directory

  • After completing the EL custom theme aboveClick on the downloadYou will get a theme file. You only need the contents of the theme folder, but it is recommended that you copy the theme folder and drop it into the static directory. Vue-cli2 static files are usually stored in the root directorystaticFolders, vuE-CLI3 static files can generally be placedpublicUnder the folder.
  • Why do I put it in a static folder because the style file is brought in in index.html through a link and you can’t find it anywhere else
  • The two sets of themes are switched. The example uses the combination of light and dark colors. The light color is actually the chalk theme, and the dark color is the custom theme. Place the downloaded CSS style files under the public -> theme file to get this directory. (Two files can be put together as to why not put this is a demo!! 1)

Introduce CSS style files

  • Introduce a style file in index.html, as shown in the figure below.

Dynamically changing themes

  • It’s essentially using the elements in the figure aboveidGet it changed laterlinkthehrefThe value of the. This is a reference toThis articleThe reference methods section of the.

let themeName = this.currentSkinName || 'defaultTheme'

const typeObj = {
  darkTheme: './theme/darkTheme/theme/index.css'.defaultTheme: './theme/defaultTheme/theme/index.css',}document.getElementById('themeStyle').href = typeObj[themeName]
Copy the code

The site peels in sync with the theme

  • This is where CSS variables come in, pre-defined style variables, defined color variables as little as possible and used to do more with fewer variables.
  • Example code only a simple implementation of the site skin, non-optimal solution, can refer to the direct use of course no big problem
  • Source click to view

If there is a better implementation method, welcome to leave a message to discuss 😀

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