Damillora
/
Yuika
mirror of https://github.com/Damillora/Yuika
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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");
}
})
});

5
partials/navigation.hbs
View File

@ -6,4 +6,9 @@
</a>
</div>
{{/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>