仅在 JS 中为具有属性的标签设置 CSS 变量答案

【问题标题】：Set CSS variable in JS only for tag with attribute仅在 JS 中为具有属性的标签设置 CSS 变量
【发布时间】：2021-02-17 23:19:06
【问题描述】：

我有一个处于亮模式和暗模式的应用程序。我只想为暗模式动态设置一个变量。我目前遇到的问题是正在为亮模式和暗模式设置动态变量。

这是一个例子：

$('#theme-btn').on('click', function() {
  //simple check if light then turn dark, and vice-versa 
  if($('html').attr('theme') === 'light') {
    $('html').attr('theme', 'dark');
  } else {
    $('html').attr('theme', 'light');
  }
})

$('#change-dark').on('click', function() {

  //set new dark mode primary color
  let dark_color = "#FF48C9"
    $("html[theme='dark']").get(0).style.setProperty("--primary", dark_color);

})

html[theme="light"] {
  --primary: #f6f6f6;
}

html[theme="dark"] {
  --primary: #121212;
}

.background {
  background: var(--primary);
  width: 100%;
  height: 60px;
  margin-bottom: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html theme="light">
<body>

<div class="background"></div>

<button id="theme-btn">Change theme</button>
<button id="change-dark">Dynamically change dark mode color</button>

</body>
</html>

测试：

多次点击Change theme按钮。
在灯光模式下，尝试点击Dynamically change dark mode color.. 应该会出现错误
接下来，更改为暗模式，现在单击Dynamically change dark mode color.. 动态变量被设置。
更改为浅色模式，并为浅色和深色模式设置动态变量...

如何让动态变量只针对暗模式进行更改。

如果有人有任何想法，那就太好了。谢谢。

【问题讨论】：

标签： javascript html jquery css css-variables

【解决方案1】：

您可以使用第二个 CSS 自定义属性，在单击按钮时进行调整，并让 --primary 使用或者该自定义属性（如果有效） - 或者，如果无效，原色（#121212）：

html[theme="light"] {
  --primary: var(--primary-light-custom, #f6f6f6);
}

html[theme="dark"] {
  --primary: var(--primary-dark-custom, #121212);
              /*   ^^^ used if valid     ^^^^^^ fallback value */
}

$("html").get(0).style.setProperty("--primary-dark-custom", dark_color);

$('html').attr('theme', 'light'); // to properly emulate your markup
      // in this Stack Snippet

$('#theme-btn').on('click', function() {
  //simple check if light then turn dark, and vice-versa 
  $('html').attr('theme',
    $('html').attr('theme') === 'light' ? 'dark' : 'light'
  );
})

$('#change-dark').on('click', function() {
  //set new dark mode primary color
  let dark_color = "#FF48C9"
  $("html").get(0).style.setProperty("--primary-dark-custom", dark_color);

})

html[theme="light"] {
  --primary: var(--primary-light-custom, #f6f6f6);
}

html[theme="dark"] {
  --primary: var(--primary-dark-custom, #121212);
}

.background {
  background: var(--primary);
  width: 100%;
  height: 60px;
  margin-bottom: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background"></div>

<button id="theme-btn">Change theme</button>
<button id="change-dark">Dynamically change dark mode color</button>

【讨论】：

【解决方案2】：

考虑一个额外的变量，这样您就可以轻松地独立管理这两个变量

$('#theme-btn').on('click', function() {
  //simple check if light then turn dark, and vice-versa 
  if($('html').attr('theme') === 'light') {
    $('html').attr('theme', 'dark');
  } else {
    $('html').attr('theme', 'light');
  }
})

$('#change-dark').on('click', function() {
  //set new dark mode primary color
  let dark_color = "#FF48C9"
    $("html").get(0).style.setProperty("--dark", dark_color);

})

html[theme="light"] {
  --primary: var(--light,#f6f6f6);
}

html[theme="dark"] {
  --primary:var(--dark,#121212);
}


.background {
  background: var(--primary);
  width: 100%;
  height: 60px;
  margin-bottom: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html theme="light">
<body>

<div class="background"></div>

<button id="theme-btn">Change theme</button>
<button id="change-dark">Dynamically change dark mode color</button>

</body>
</html>

【讨论】：