<div id="app" class="app">
  <h1 class="title">Hello, World</h1>
  <p class="subtitle">当前主题：<span id="theme-current">亮色</span></p>
  <button class="theme-switch light" data-theme="light">亮色</button>
  <button class="theme-switch dark" data-theme="dark">暗色</button>
</div>

// 所有主题样式
$bg-color-light: #fff;
$bg-color-dark: #091a28;
$title-color-light: #363636;
$title-color-dark: #ffffff;
$subtitle-color-light: #4a4a4a;
$subtitle-color-dark: cyan;

.app {
  // 默认主题样式（light主题）
  background-color: $bg-color-light;
  
  // dark主题样式
  [data-theme='dark'] & {
    background-color: $bg-color-dark;
  }
}

.title {
  color: $title-color-light;
  
  [data-theme='dark'] & {
    color: $title-color-dark;
  }
}

.subtitle {
  color: $subtitle-color-light;
  
  [data-theme='dark'] & {
    color: $subtitle-color-dark;
  }
}

// light主题色
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}

.theme-switch {
  cursor: pointer;
}

const btns = document.querySelectorAll('.theme-switch');
const body = document.body;
const currentThemeNode = document.getElementById('theme-current');

const addEvent = (btn) => {
  btn.addEventListener('click', e => {
    const theme = e.target.dataset.theme;
    body.setAttribute('data-theme', theme);
    if(theme === 'light') {
      currentThemeNode.textContent = '亮色';
    } else if (theme === 'dark') {
      currentThemeNode.textContent = '暗色';
    }
  })
}

btns.forEach(btn => {
  addEvent(btn);
})