好的,我正在为我的网页创建一个系统,允许用户更改主题.我希望如何实现这一点:将所有 colored颜色 作为变量,并在CSS的:root部分中设置 colored颜色 .
我想做的是通过JavaScript更改这些 colored颜色 .我查了一下怎么做,但我try 的方法实际上都不管用.以下是我当前的代码:
CSS:
:root {
--main-color: #317EEB;
--hover-color: #2764BA;
--body-color: #E0E0E0;
--box-color: white;
}
JS:
(设置主题的代码,它是在单击按钮时运行的)-我没有费心将:root更改添加到其他两个主题,因为它在黑暗主题上不起作用
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时运行的代码)
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'));
}
}
它会显示alert ,但实际上不会更改任何内容.有人能给我指个方向吗?