Writing in the front

A link to the

Github Star Varlet component library Github Star

Hello everyone, the author has come again, those who are familiar with the author know that the author is a good youth (eat well, drink well, sleep well) who likes to pour components library. The National Day holiday is over for a week, the pace of work is back, and the component library has to continue to shuffle. As you may have guessed from the title, the author does not introduce theme replacement and one-key skin replacement for no reason.

In fact, Varlet has long supported theme replacement and one-click skin replacement. In the following article, I will introduce the implementation of theme replacement from the author’s perspective and the user’s perspective. I hope it will be helpful to you. Varlet’s next plan is to define a set of dark mode theme styles. Although the author is a good young man, the author’s liver is, alas, not so good, and there’s strength in numbers. If you are interested in joining us, you can leave a comment on our issue list

The core logic

Theme replacement basically means replacing or overwriting CSS styles in batches at run time without being very intrusive to the code. There are about two main ways to decouple theme and logic

Substitution of style variables at build time

Designer perspective

Since most of our current applications use build tools (Vue Cli or Vite), we can compile styles at build time to achieve attributes A -> B, using less as an example. When writing component styles, the author extracted variables for the expected replacement styles, especially for some common styles, such as color, font…

These are just some general style variables, different components have their own variables and attributes…

User perspective

Vue Cli users use less Loader to modify variable values, such as theme colors.

### Vue cli ```js // vue.config.js module.exports = { css: { loaderOptions: { less: { modifyVars: { 'color-primary': '#009688',}}}}}Copy the code

Vite users can still do this with a simple configuration, because the ability to replace theme variables is provided by the LESS preprocessor and is simply integrated by different build tools. By the way, Vite handles ~ differently than Vue Cli because ~ is actually a less-loader syntax, so Vite handles this syntax in a special way, but that’s not relevant to the topic of this article.

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'color-primary': '# 009688',}}}},resolve: {
    alias: [{find: / ^ ~ /, replacement: ' '}],}})Copy the code

Realize one key skin change at run time

While variable substitution using a preprocessor has partially addressed our needs, what if we want to be able to do theme substitution while the application is running? Webpack-theme-color-replacer does this by splitting the theme and generating different CSS files. The replacement will request the corresponding theme file, along with a network request. So the efficiency is relatively low. CSS VAR based solutions are described below, and are highly recommended by the author.

Run-time style variable replacement based on CSS VAR

Designer perspective

CSS Vars are browser-provided features that are native runtime style variables. The biggest advantage is that the run-time replacement is extremely fast. When designing components, attach style variables to :root and then modify them through the browser-provided API.

:root{-font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --icon-size-xs: 16px;
  --icon-size-sm: 18px;
  --icon-size-md: 20px;
  --icon-size-lg: 22px;
  --color-primary: #3a7afe;
  --color-info: #00afef;
  --color-success: #00c48f;
  --color-warning: #ff9f00;
  --color-danger: #f44336;
  --color-disabled: #e0e0e0;
  --color-text-disabled: #aaa;
  --cubic-bezier: cubic-bezier(0.25.0.8.0.5.1);
}
Copy the code

User perspective

The user can use the API or directly through the CSS overwrite form to replace the root CSS variable, CSS overwrite is not more explained, the following is through the API modification method, or very convenient.

document.documentElement.style.setProperty('--color-primary'.'#aaa')
Copy the code

Implementation of Varlet

We’re using less preprocessor + CSS Vars, which means “I want all, I can have all”, so the component styles will look something like this…

This allows users to do build-time replacements as well as CSS vars, depending on their preferences. After the subject substitution mechanism is established with to question because of too much style variables, most users may not be cost and energy to go to the custom of each component, but also hope to have a key for the ability of the skin, this is our component library designers should do, we need to provide the theme of the first party for the user, such as experience relatively good diablo pattern theme. That’s what Varlet plans to do next.

Write in the last

After the release of Varlet1.0, almost every feature is developed by interested partners. Varlet is also completely unprofitable, because we all enjoy the development pace and communication atmosphere purely for interest, and also feel the fun brought by open source, learning from each other and making fun of each other. And we strive to do a good job in every feature and reply to every issue seriously. If you are interested in contributing, you can join us. We are looking forward to it.