如何在JavaScript中更改CSS:root颜色变量 [英] How to change CSS :root color variables in JavaScript

问题描述

好的，我正在为我的网页创建一个系统，允许用户更改主题.我想通过将所有颜色作为变量来实现此目的，并且颜色是在CSS的:root部分中设置的.

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.

我想做的是通过JavaScript更改这些颜色.我抬头看怎么做，但是我尝试的任何事情实际上都无法正常工作.这是我当前的代码:

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:

(用于设置主题的代码，只需单击按钮即可运行)-我没有费心将:root更改添加到其他2个主题中，因为它不适用于Dark主题

(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");
  }
}

(加载html时运行的代码)

(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?

推荐答案

感谢@pvg提供链接.我不得不凝视一下以了解发生了什么，但是我终于明白了.

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!

这篇关于如何在JavaScript中更改CSS:root颜色变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！