diff --git a/web/_includes/navbar.html b/web/_includes/navbar.html
index ba7f2fd..b663683 100644
--- a/web/_includes/navbar.html
+++ b/web/_includes/navbar.html
@@ -1,4 +1,12 @@
diff --git a/web/_includes/social.html b/web/_includes/social.html
index 3e3cdb2..e4772d0 100644
--- a/web/_includes/social.html
+++ b/web/_includes/social.html
@@ -10,8 +10,14 @@
-
+
+
+
+
+
diff --git a/web/_layouts/default.html b/web/_layouts/default.html
index 624730e..33d2782 100644
--- a/web/_layouts/default.html
+++ b/web/_layouts/default.html
@@ -21,7 +21,7 @@
-
+
@@ -35,6 +35,7 @@
+
@@ -43,6 +44,14 @@
{{ content }}
diff --git a/web/main.js b/web/main.js
new file mode 100644
index 0000000..f2e4bd8
--- /dev/null
+++ b/web/main.js
@@ -0,0 +1,21 @@
+const darkStorage = localStorage.getItem("dark");
+const darkTheme = darkStorage === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : darkStorage === "true";
+if (darkTheme) {
+ $('head').append($("", {
+ rel: "stylesheet",
+ href: "/style/dark.css"
+ }));
+}
+
+
+$(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();
+ });
+});
diff --git a/web/style/dark.css b/web/style/dark.css
new file mode 100644
index 0000000..b661f4f
--- /dev/null
+++ b/web/style/dark.css
@@ -0,0 +1,8 @@
+body {
+ color: white;
+ background-color: #1b1b1b;
+}
+
+.text-muted {
+ color: #929aa0 !important;
+}
diff --git a/web/style.css b/web/style/style.css
similarity index 97%
rename from web/style.css
rename to web/style/style.css
index f95b59a..7d1bf98 100644
--- a/web/style.css
+++ b/web/style/style.css
@@ -16,7 +16,7 @@ h1, h2, h3, h4, h5, h6, .nav-item {
}
.top {
- background-image: url("media/large_background.png");
+ background-image: url("/media/large_background.png");
background-size: cover;
color: white;
}