From 7de224130646c7c9fb39946c64a58e08bdbf02cc Mon Sep 17 00:00:00 2001 From: Ellpeck Date: Tue, 13 Jun 2023 17:24:58 +0200 Subject: [PATCH] initial dark theme support --- web/_includes/navbar.html | 13 +++++++++++++ web/_includes/social.html | 16 +++++++++++++++- web/_layouts/default.html | 11 ++++++++++- web/main.js | 21 +++++++++++++++++++++ web/style/dark.css | 8 ++++++++ web/{ => style}/style.css | 2 +- 6 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 web/main.js create mode 100644 web/style/dark.css rename web/{ => style}/style.css (97%) 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 @@
- +
+ +
@@ -32,5 +38,13 @@

+ + 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 }}
+ + © 2021-2023 Ellpeck Games, Top Hat Studios – Impressum – Privacy – Status
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; }