Menu
Alright, I'm creating a system for my webpage that allows users to change the theme. How I want to accomplish this is by having all the colors as variables, and the colors are set in the :root part of the CSS.
What I want to do is change those colors via JavaScript. I looked up how to do it, but nothing that I attempted actually worked properly. Here's my current code:
CSS:
:root { --main-color: #317EEB; --hover-color: #2764BA; --body-color: #E0E0E0; --box-color: white; } JS:
(Code to set the theme, it's ran on the click of a button) - I didn't bother adding the :root change to the other 2 themes since it doesn't work on the Dark theme
function setTheme(theme) { if (theme == 'Dark') { localStorage.setItem('panelTheme', theme); $('#current-theme').text(theme); $(':root').css('--main-color', '#000000'); } if (theme == 'Blue') { localStorage.setItem('panelTheme', 'Blue'); $('#current-theme').text('Blue'); alert("Blue"); } if (theme == 'Green') { localStorage.setItem('panelTheme', 'Green'); $('#current-theme').text('Green'); alert("Green"); } } (Code that is ran when the html is loaded)
function loadTheme() { //Add this to body onload, gets the current theme. If panelTheme is empty, defaults to blue. if (localStorage.getItem('panelTheme') == '') { setTheme('Blue'); } else { setTheme(localStorage.getItem('panelTheme')); $('#current-theme').text(localStorage.getItem('panelTheme')); } } It shows the alert, but does not actually change anything. Can someone point me in the right direction?
234
CSS variables have access to the DOM, which means that you can change them with JavaScript.
Setting a CSS Variable's Value To set the value of a CSS variable using JavaScript, you use setProperty on documentElement 's style property: document. documentElement. style .
To declare a variable in CSS, come up with a name for the variable, then append two hyphens (–) as the prefix. The element here refers to any valid HTML element that has access to this CSS file. The variable name is bg-color , and two hyphens are appended.
CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. A good way to use CSS variables is when it comes to the colors of your design.
The var () function is used to insert the value of a CSS variable. CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. A good way to use CSS variables is when it comes to the colors of your design.
We can assign colors to the body like this: The body tag returns the selected variable color depending on the class assigned to the :root . At this point we can use JavaScript to determine the class for the :root tag and, as promised, we’ll only need one line: The setTheme function sets the root element’s class to the parameter theme .
CSS Variables. The var () function is used to insert the value of a CSS variable. CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.
This event is handled by the changeColor () function. The changeColor () function receives the DOM event as a parameter, making it very easy to operate on the specific tag that was clicked. The function declares the variable to hold the element – el – and assigns the event.target value to it.
Thank you @pvg for providing the link. I had to stare at it for a little to understand what was going on, but I finally figured it out.
The magical line I was looking for was this:
document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR'); That did exactly what I wanted it to do, thank you very much!
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With