css中的多个主题可供选择

Question

用户选择两个 colors - 背景和文本。 当用户按下“应用” div 更改。 但我希望主题是分开的，就像两个主题同时工作：一个用于背景，第二个用于文本。 所以有 4 个主题选项，必须选择其中的 2 个。 但当时只应用了一个：我知道这个解释很模糊，所以请查看 jsfiddle 上的示例： http://jsfiddle.net/7Lysdwzo/2/尝试一下，然后评论 function saveTheme 中的第二行：setTheme( ); . 每次只有一个方面改变。

代码：

<div>
<div id="choose"></div>

  <div class="toggle-container">
    <button onclick="theme1='light';showChosen()" title="Light mode">
     light
    </button>
    <button onclick="theme1='dark';showChosen()" title="Dark mode">
     dark
    </button>
    <br/>
    <button onclick="theme2='Blue';showChosen()" title="Blue">
     Blue
    </button>
    <button onclick="theme2='Green';showChosen()" title="Green">
     Green
    </button>
  </div>
  
  <div class="div1" style="height:100px;width:100px"> div </div>
  
</div>

:root,
:root.light {
  --bg-color: #fff;
}
:root.dark {
  --bg-color: #121212;
  
}
button:checked {
  border:1px solid red;
}

:root,
:root.Blue {
  --text-color: blue;
}

:root.Green {
  --text-color: green;
}

.div1,.div2 {
  background-color: var(--bg-color);
  color: var(--text-color)
}
const setTheme = theme => document.documentElement.className = theme;

var theme1="";
var theme2="";

function saveTheme() {
setTheme(theme1);
setTheme(theme2);

}

function showChosen() {
var str = 'background should be: ' + theme1 + ';;; text should be: ' + theme2 + '<button onclick="saveTheme()" title="Green"> apply</button>';
document.getElementById("choose").innerHTML = str;

}

有没有办法同时使用两个主题，一个用于一个方面，另一个用于另一个方面？

Answer 1

您可以使用 classList.add 和 classList.remove 而不是替换整个类名。

小提琴

const setTheme = theme => document.documentElement.classList.add(theme);

var theme1="";
var theme2="";

function saveTheme() {
  // remove all the themes that the user could have added before
  document.documentElement.classList.remove("light", "dark", "Blue", "Green");
  setTheme(theme1);
  setTheme(theme2);
}

Answer 2

你不必使用类。 您可以使用数据属性来存储每种类型，并仅使用单个事件处理程序来查找 class 以确定要执行的操作。

 function setTheme(el,theme,type){ el.setAttribute("data-" + type,theme); } let target = document.querySelector(".div1"); document.body.addEventListener("click",function(e){ let btn = e.target; if(btn.classList.contains("setTheme")){ target.setAttribute("data-" + btn.dataset.type,btn.dataset.theme); var str = 'background should be: ' + (target.dataset.bg || "") + ';;; text should be: ' + (target.dataset.text || "") + '<button class="saveTheme" title="Green"> apply</button>'; document.getElementById("choose").innerHTML = str; } else if(btn.classList.contains("saveTheme")){ console.log("save") } });

 :root, [data-bg="theme1"] { --bg-color: #fff; } [data-bg="theme2"] { --bg-color: #121212; } button:checked { border:1px solid red; }:root, [data-text="blue"]{ --text-color: blue; } [data-text="green"]{ --text-color: green; }.div1,.div2 { background-color: var(--bg-color); color: var(--text-color) }

 <div> <div id="choose"></div> <div class="toggle-container"> <button class="setTheme" data-type="bg" data-theme="theme1" title="Light mode"> light </button> <button class="setTheme" data-type="bg" data-theme="theme2" title="Dark mode"> dark </button> <br/> <button class="setTheme" data-type="text" data-theme="blue" title="Blue"> Blue </button> <button class="setTheme" data-type="text" data-theme="green" title="Green"> Green </button> </div> <div class="div1" style="height:100px;width:100px"> div </div> </div>