<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
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.