有没有办法匹配当前主题的背景/文本颜色？

:root {
  --bg-color: #ffffff; /* 默认的背景颜色 */
  --text-color: #000000; /* 默认的文本颜色 */
}

/* 某个特定主题下的值 */
.theme-dark {
  --bg-color: #333333; /* 深色主题的背景颜色 */
  --text-color: #ffffff; /* 深色主题的文本颜色 */
}

/* 使用变量设置样式 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

<button onclick="toggleTheme()">切换主题</button>

<script>
function toggleTheme() {
  var body = document.body;
  // 切换到深色主题
  if (body.classList.contains('theme-dark')) {
    body.classList.remove('theme-dark');
  } else { // 切换到浅色主题
    body.classList.add('theme-dark');
  }
}
</script>

<style>
/* 默认样式 */
body {
  background-color: #ffffff; /* 默认背景颜色 */
  color: #000000; /* 默认文本颜色 */
}

/* 深色主题下的样式 */
.theme-dark {
  background-color: #333333; /* 深色背景颜色 */
  color: #ffffff; /* 深色文本颜色 */
}
</style>