mirror of
https://github.com/Damillora/Yuika
synced 2024-11-13 21:47:32 +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:
parent
bcf0b2eef3
commit
9f72b03781
14
assets/js/dark-mode.js
Normal file
14
assets/js/dark-mode.js
Normal 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");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
@ -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>
|
Loading…
Reference in New Issue
Block a user