About the getThemeCluster function in the source code of element-ui skin-changing function

getThemeCluster(theme) {
      const tintColor = (color, tint) => {
        let red = parseInt(color.slice(0, 2), 16)
        let green = parseInt(color.slice(2, 4), 16)
        let blue = parseInt(color.slice(4, 6), 16)
        if (tint === 0) { // when primary color is in its rgb space
          return [red, green, blue].join(",")
        } else {
          red += Math.round(tint * (255 - red))
          green += Math.round(tint * (255 - green))
          blue += Math.round(tint * (255 - blue))
          red = red.toString(16)
          green = green.toString(16)
          blue = blue.toString(16)
          return `-sharp${red}${green}${blue}`
        }
      }
      const shadeColor = (color, shade) => {
        let red = parseInt(color.slice(0, 2), 16)
        let green = parseInt(color.slice(2, 4), 16)
        let blue = parseInt(color.slice(4, 6), 16)
        red = Math.round((1 - shade) * red)
        green = Math.round((1 - shade) * green)
        blue = Math.round((1 - shade) * blue)
        red = red.toString(16)
        green = green.toString(16)
        blue = blue.toString(16)
        return `-sharp${red}${green}${blue}`
      }
      const clusters = [theme]
      for (let i = 0; i <= 9; iPP) {
        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
      }
      clusters.push(shadeColor(theme, 0.1))
      return clusters
    }

Source address
the parameter theme of this function is a color value, such as 409EFF. Then, as soon as the function comes in, the tintColor and shadeColor functions are defined, and then the for loop executes clusters.push (tintColor (theme, Number ((i / 10) .tofixed (2) 10 times, followed by clusters.push (shadeColor (theme, 0.1)), return clusters. Judging from the results of breakpoint debugging, the resulting clusters is an array of color values.

I don"t understand what tintColor and shadeColor have done and what the resulting pile of color values has to do with it. What do the passed tint and shade parameters mean, and why should they be looped 10 times?


if theme is' red'
if some buttons are calculated based on the theme color, the 'light red'
tint function calculates this light red method
is probably the following
red * transparency (0.2) = light red
cycle 10 times is calculated to be a different degree of light red
it is recommended to take a look at the less document


I don't understand.

Menu