Despite reading numerous articles on this topic, I am struggling to implement a feature where a random color from a list is applied as the background image every time the page is refreshed.
$red: #fc5545;
$pink: #FCCCD1;
$green: #005E61;
$greenLight: #42BA80;
$yellow: #ffcf6f;
$orange: #F57859;
$orangeLight: #FABD91;
$greyLight: #ebebeb;
$greyDark: #2e2e2e;
$blue: #29A8BF;
$blueLight: #B8E3EB;
$blueDark: #142447;
$colors: $pink, $green, $greenLight, $yellow, $orange, $orangeLight, $blue, $blueLight, $blueDark;
$colorsText: $blueDark, $orangeLight, $blueLight, $red, $blueLight, $red, $blueLight, $blue, $pink;
$key: random( length($colors) );
$nth: nth( $colors, $key );
$nthText: nth( $colorsText, $key );
$random: $nth !default;
$randomText: $nthText !default;
.boxTitle {
background-color: $random;
color: $randomText !important;
}
Unfortunately, the color remains the same every time I refresh the page.