有没有办法自动改变背景颜色的阴影？

Question

Was wondering if there was a way to use a spectrum to change the background color based off of variables such as temp the higher it is, the more the colour will become orange from blue? or would I actually have to assign values

if (temp < 10) {
document.body.className = "background-cold";
} else if (temp > 10) {
document.body.className = "background-warm";
}

.background-cold {
  background: linear-gradient(
    179.31deg,
    rgba(48, 87, 89, 0.97) 9.28%,
    #fdfeff 167.45%
  );
}

.background-warm {
  background: linear-gradient(
    179.31deg,
    rgba(204, 101, 26, 0.97) 9.28%,
    #fdfeff 167.45%
  );
}

Answer 1

var hue = temp * someScale; // use some formula to determine the appropriate hue from the temperature
var saturation = 1;
var lightness = 1;
document.body.style.backgroundImage = `linear-gradient(179.31deg, hsla(${hue}%,${saturation}%,${lightness}%) 9.28%, #fdfeff 167.45%)`;

Answer 2

For the approach you intend to do I don't recomemend using the .className attribution. It will be hardcoded and that's not what you want. You can just use style.setProperty(string, string) in wich the first parameter is the CSS atttribute and the second parameter is the CSS value . Both of them need to be strings in order to work.

let colorValue = 'linear-gradient(VALUES)';
document.body.style.setProperty('background', colorValue);

By using the previous code you can now set directly the background you want. However your still need a function to create a dynamic colorValue according to the temperature . This can become a little complex depending on the color values you intend to apply. A possible solution for this can be found in the following link: https://stackoverflow.com/a/12934900/11860800 .

I hope this answer helps you! Happy coding!