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?