您可以将配色方案动态应用于单个 css 文件吗？

Question

我有 4 个不同的 css 文件，除了它们使用不同的配色方案（即红色、蓝色、绿色）外，它们是相同的。在我的程序开始时，用户选择他们想要的配色方案，然后选择相应的 css 文件。有没有办法只拥有 1 个 css 文件并将所有配色方案都放在该文件中，然后当用户选择一个方案时，css 文件中的每个项目都应用了所选的颜色？

我正在使用 javaFX 8。

Answer 1

正如 A Haworth 提到的，您可能可以用 CSS 变量做一些事情。我不知道 javaFX 是如何工作的，但希望你能做一些类似于我在下面写的事情。我为正文设置了一个 CSS 变量，然后在用户单击按钮时让 jQuery 更改该变量。

$(document).ready(function() {
   $("body").on("click", "#blue", function() {
     $("body").css("--main-color", "blue");
   });
   $("body").on("click", "#red", function() {
     $("body").css("--main-color", "red");
   });
});

:body {
  --main-color: blue;
}

.div-1 {
  background: var(--main-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="div-1">Div 1</div>
  <button id='blue'>Blue</button>
  <button id='red'>Red</button>
</body>
</html>

您可以将配色方案动态应用于单个 css 文件吗？

Can you dynamically apply a colour scheme to a single css file?

java

javafx

javafx-css