仅针对具有属性的标签在 JS 中设置 CSS 变量

Question

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

这是一个例子：

$('#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。动态变量设置完成。
更改为浅色模式，并为浅色和深色模式设置动态变量...

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

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

Answer 1

您可以使用第二个 CSS 自定义属性，它会在单击按钮时进行调整，并让 --primary 使用 either 自定义属性（如果有效）- 或者，如果无效，原始颜色（#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>

Answer 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>

仅针对具有属性的标签在 JS 中设置 CSS 变量

Set CSS variable in JS only for tag with attribute

html

javascript

css

jquery

css-variables