How to use :root, instead of a class

Question

I want to use :root instead of a class here, how would I do that here?

Is this something that I am able to do?

That is all, or everything I am trying to do in the code.

This is what :root is.

:root {
  }

And this is the working code I have. https://jsfiddle.net/s6xocny3/

How would I be able to do that if it is possible?

Can this one be updated and fixed? Can it be modified?

https://stackoverflow.com/a/71656076/17974392

Also, I am not using setInterval.

   (function randomBackground() {
      const classNames = [
        "bg1",
        "bg2",
        "bg3",
        "bg4",
        "bg5",
        "bg6",
        "bg7",
        "bg8",
        "bg9"
      ];
    
      const random = Math.floor(Math.random() * classNames.length);
      document.querySelector("body").classList.add(classNames[random]);
    }());

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

.bg2 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg3 {
  --color-a: linear-gradient(45deg, #102eff, #d2379b);
}

.bg4 {
  --color-a: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}

.bg5 {
  --color-a: linear-gradient(115deg, #0a0e88, #00b1ce);

}

.bg6 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg7 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg8 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg9 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: var(--color-a);
  background-repeat: no-repeat;
}

Your question doesn't really make sense. The current code predefines a number of rulesets with different class selectors to display styles when different conditions are met (i.e. when the element is a member of a particular class) and then uses JS to make one of those conditions true at random. `:root` is always true for the root element. You can't turn an element into the root element dynamically with JS. — Quentin, Mar 29 '22 at 13:59
Then the person who told you it was possible should be able to help you. It's possible you misinterpreted what they said or that they misinterpreted what you were asking. — Quentin, Mar 29 '22 at 14:01
Can this one be updated and fixed? https://stackoverflow.com/a/71656076/17974392 — Eve Ninnall, Mar 29 '22 at 14:02
@Lawrence Cherone provided an answer, I just wanted to know how to do that in the code. — Eve Ninnall, Mar 29 '22 at 14:10
Is your question "How do I create a `:root {--color-1: red; --color-2: blue}"` style from JavaScript"? Explaining what you are trying to do would help others understand your question. — Ruan Mendes, Mar 29 '22 at 14:13
I see with displeasure that you didn't take the time to properly read my answer on the link you provided yourself. If you're not interested in using setInterval, ignore it; but random variable allocation `--colorX` is your answer. — Mister Jojo, Mar 29 '22 at 14:28

score 2 · Accepted Answer · answered Mar 29 '22 at 14:16

Set into :root, your color vars, then change the background-image: var(--color-a); with the random color.

(function randomBackground() {
  const varNames = [
    "color-a",
    "color-b",
    "color-c"
  ];

  const random = Math.floor(Math.random() * varNames.length);
  document.body.style.backgroundImage = 'var(--' + varNames[random] + ')';
}());

:root {
  --color-a: linear-gradient(120deg, #155799, #159957);
  --color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
  --color-c: linear-gradient(45deg, #102eff, #d2379b);
  /* ... */
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: var(--color-a);
  background-repeat: no-repeat;
}

user3297291 · Answer 2 · 2022-03-29T14:16:52.803

You can redefine the value of a custom css property using setProperty. For example:

document
  .documentElement
  .style
  .setProperty('--dynamic-background', bgs[random]);

Here's a snippet similar to you that only uses 1 custom css property and updates its value through javascript:

function randomBackground() {
  const bgs = [
    "linear-gradient(120deg, #155799, #159957)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
    "linear-gradient(45deg, #102eff, #d2379b)",
    "linear-gradient(90deg, #360033 30%, #0b8793 100%)",
    "linear-gradient(115deg, #0a0e88, #00b1ce)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
  ]
    
    const random = Math.floor(Math.random() * bgs.length);

    document
      .documentElement
      .style
      .setProperty('--dynamic-background', bgs[random]);
};

  randomBackground();

:root {
  --dynamic-background: linear-gradient(120deg, lime, red);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: var(--dynamic-background);
  background-repeat: no-repeat;
}

I used `setInterval` so you can see the code working in action... You can just replace it with the function you have in your example... — user3297291, Mar 29 '22 at 14:16
@EricaLevine There is nothing forcing you to use `setInterval`, this is just showing you one way to cycle through the colors. Please be more careful when explaining something, "I do not want to use setInterval" does not tell us anything that helps understand why you don't want to use it. Please see https://stackoverflow.com/help/how-to-ask — Ruan Mendes, Mar 29 '22 at 14:16

How to use :root, instead of a class

2 Answers2