Ellpeck/TinyLifeWeb
1
0
Fork 0
mirror of https://github.com/Ellpeck/TinyLifeWeb.git synced 2024-12-22 06:39:23 +01:00
Code Issues Projects Releases Wiki Activity

script cleanup

Browse source
This commit is contained in:
Ell 2023-06-19 10:44:55 +02:00
parent 953cfc4cc0
commit 9fc989d9a6
3 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/_includes/navbar.html
View file

@ -17,6 +17,10 @@
</button>
<div class="collapse navbar-collapse" id="navbar-content">
<script>
$(".navbar-collapse a").on("click", () => $(".navbar-collapse").collapse("hide"));
</script>
<div class="navbar-nav mr-auto" id="nav-items">
{% if page.nav %}
{% include {{ page.nav }} %}
@ -28,6 +32,15 @@
<span class="navbar-text custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">🌙 Dark</label>
<script>
let mode = $("#dark-mode");
mode.prop("checked", darkTheme);
mode.on("click", function () {
localStorage.setItem("dark", $(this).prop("checked"));
location.hash = "";
location.reload();
});
</script>
</span>
</div>
</div>

6
web/_layouts/default.html
View file

@ -29,7 +29,11 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/main.js"></script>
<script>
const darkStorage = localStorage.getItem("dark");
const darkTheme = darkStorage === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : darkStorage === "true";
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap">

14
web/main.js
View file

@ -1,14 +0,0 @@
const darkStorage = localStorage.getItem("dark");
const darkTheme = darkStorage === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : darkStorage === "true";
$(function () {
$(".navbar-collapse a").on("click", () => $(".navbar-collapse").collapse("hide"));
let mode = $("#dark-mode");
mode.prop("checked", darkTheme);
mode.on("click", function () {
localStorage.setItem("dark", $(this).prop("checked"));
location.hash = "";
location.reload();
});
});