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;
}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;
}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;
}