如何在CSS中实现主题

:root {
  --primary-color: #ff0000; /* 定义主题颜色变量 */
}

.button {
  background-color: var(--primary-color); /* 使用主题颜色变量 */
}

/* 定义主题样式 */
.theme-light {
  background-color: #ffffff;
  color: #000000;
}

.theme-dark {
  background-color: #000000;
  color: #ffffff;
}

<!-- HTML中的元素 -->
<div class="theme-light">Light Theme</div>
<div class="theme-dark">Dark Theme</div>

// JavaScript中切换主题
const lightButton = document.querySelector('.theme-light');
const darkButton = document.querySelector('.theme-dark');

lightButton.addEventListener('click', () => {
  document.body.classList.remove('theme-dark');
  document.body.classList.add('theme-light');
});

darkButton.addEventListener('click', () => {
  document.body.classList.remove('theme-light');
  document.body.classList.add('theme-dark');
});

// 定义主题变量和样式规则
$primary-color: #ff0000;

.button {
  background-color: $primary-color;
}