<h1>Kaomoji</h1>
<p>
kaomoji là một dạng emoticon phổ biến của người Nhật được kết hợp từ các ký tự tiếng Nhật và dấu câu. Kaomoji gồm 2 từ trong bộ Kanji: “kao” (顔 – “face”) and “moji” (文字 – “character”). ╮(︶︿︶)╭
</p>
<div class="switch-theme">
  <a href="#" class="switch" data-theme="light">Light</a>
  <a href="#" class="switch" data-theme="dark">Dark</a>
</div>
:root {
  --bg: #fff;
  --color: #222831;
}
.dark {
  --bg: #222831;
  --color: #fff;
}
body {
  background-color: var(--bg);
  color: var(--color);
  display: flex;
  just-content: center;
  align-items: center;
  flex-flow: column nowrap;
  padding:  50px 10vw;
}
a {
  color: #1c9963;
}
View Compiled
var switchEl = document.querySelectorAll('.switch')
var bodyEl = document.querySelector('body')
switchEl.forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault();
    var theme = e.currentTarget.dataset.theme
    bodyEl.className = theme
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.