1
0
mirror of https://github.com/Damillora/Yuika synced 2024-11-22 09:17:33 +00:00

feat(theme): add dark mode

With version 3, Yuika now uses Shian as a basis of styling. Since
Shian was written with both light and dark themes in mind, this
means that the theme now is able to support switching between them.

This commit implements a dark theme toggle that will switch the
site between light and dark themes.
This commit is contained in:
Damillora 2021-04-14 19:38:23 +07:00
parent bcf0b2eef3
commit 9f72b03781
2 changed files with 19 additions and 0 deletions

14
assets/js/dark-mode.js Normal file
View File

@ -0,0 +1,14 @@
$(document).ready(function () {
$("#darkMode").click(function () {
if (window.document.body.getAttribute("data-theme") != "dark") {
window.document.body.setAttribute("data-theme", "dark");
$("#darkMode i").text("brightness_high");
$("#darkMode p").text("Light Mode");
} else {
window.document.body.setAttribute("data-theme", "light");
$("#darkMode i").text("brightness_low");
$("#darkMode p").text("Dark Mode");
}
})
});

View File

@ -6,4 +6,9 @@
</a> </a>
</div> </div>
{{/foreach}} {{/foreach}}
<div class="menu__item" id="darkMode">
<i class="material-icons md-24">brightness_low</i>
<p class="menu__text">Dark Mode</p>
</div>
</div> </div>