0

I'm in process of experimenting to create a portfolio website, and I wondered if there's a way to set the accent color to change with each new load of the website (specifically in hue, not saturation or value).

To describe the desired result: The website has a set dark theme, with saturated accent color designs, texts, buttons, etc. Each time you refresh, go through a page, or re-load the page, the accent color changes in hue, from blue to pink, from pink to orange, while keeping the same value and saturation.

Jule Kornilov
  • 1

3 Answers3

0

Using JS you could probably just have a random number generator to choose colors from an array of accent colors i.e

colors = ["blue","lightblue","red","darkred"]
color = Math.floor(Math.random()*colors.length)
root.style.setProperty('--accent-color',"color")

Then in css use the --accent-color variable for your accent colors

root {
  --accent-color: //insert default color;
}

.useCase {
  background-color:var(--accent-color);
}
Coupe
  • 372
  • 2
  • 12
0

I would use the function hsl with a fixed Saturation and Lightness, changing only the Hue with a random function, which will need LESS, something like:

@randomHue: `Math.round(Math.random() * 360)`;
div {
    .random(0, 360);
    background-color:hsl( ~'@{randomHue}',100%,50%);
}

Can find more info here and here

Sabito stands with Ukraine
  • 4,271
  • 8
  • 34
  • 56
Quimi Font
  • 31
  • 7
0

With JS and CSS, you could do something like:

.my-selector {
  --hue: 0;
  background-color: hsla(var(--hue), 50%, 50%, 1);
}

document.querySelector('.my-selector')
.style.setProperty('--hue', Math.round(Math.random() * 360))

If you have fixed hue's, as it seems to be the case:

const hues = [25, 240, 346]

document.querySelector('.my-selector')
.style.setProperty('--hue', hues[Math.floor(Math.random() * hues.length)])

If it has to be nonrandom, and we need a different color on page refresh, the JS could be something like:

const hues = [25, 240, 346]

function getIndex() {
  const index = Number(sessionStorage.getItem('index'))

  if (index < (hues.length - 1) && index !== null) {
    return index + 1
  }

  return 0 
}

const index = getIndex()

document.querySelector('.my-selector')
.style.setProperty('--hue', hues[index])

sessionStorage.setItem('index', index)

More about custom properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties