<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>
  <input type="color" id="background-color-picker" name="color" value="#e66465" />
</div>
:root {
  --bg: #fff;
  --color: #222831;
}
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;
}
var switchEl = document.querySelectorAll('.switch');
var rootStyle = document.documentElement.style;
switchEl.forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault();
    var theme = e.currentTarget.dataset.theme
    switch (theme) {
      case 'light':
        rootStyle.setProperty('--bg', "#fff");
        rootStyle.setProperty('--color', "#222831");
        break;
      case 'dark':
        rootStyle.setProperty('--bg', "#222831");
        rootStyle.setProperty('--color', "#fff");
        break;
    }
  })
});
document.getElementById('background-color-picker').addEventListener("change",(event) => {
  rootStyle.setProperty('--bg', event.target.value);
  rootStyle.setProperty('--color', invertColor(event.target.value));
}, false);

function invertColor(hexTripletColor) {
        var color = hexTripletColor;
        color = color.substring(1); // remove #
        color = parseInt(color, 16); // convert to integer
        color = 0xFFFFFF ^ color; // invert three bytes
        color = color.toString(16); // convert to hex
        color = ("000000" + color).slice(-6); // pad with leading zeros
        color = "#" + color; // prepend #
        return color;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.