From 29ba63603d2308fc232ee8520e1f4b69fdb0810d Mon Sep 17 00:00:00 2001 From: Ellpeck Date: Sun, 18 Jun 2023 19:12:43 +0200 Subject: [PATCH] improved the way dark mode works --- web/_layouts/default.html | 7 ++++++- web/main.js | 17 +++++------------ web/{style => }/style.css | 9 +++++++++ web/style/dark.css | 8 -------- 4 files changed, 20 insertions(+), 21 deletions(-) rename web/{style => }/style.css (95%) delete mode 100644 web/style/dark.css diff --git a/web/_layouts/default.html b/web/_layouts/default.html index 33d2782..2cf3598 100644 --- a/web/_layouts/default.html +++ b/web/_layouts/default.html @@ -21,7 +21,7 @@ - + @@ -39,6 +39,11 @@ + + {% include navbar.html %} {{ content }} diff --git a/web/main.js b/web/main.js index f2e4bd8..172e363 100644 --- a/web/main.js +++ b/web/main.js @@ -1,20 +1,13 @@ 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')); + $(".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')); + 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/style.css b/web/style.css similarity index 95% rename from web/style/style.css rename to web/style.css index 383f92e..948e83b 100644 --- a/web/style/style.css +++ b/web/style.css @@ -169,6 +169,15 @@ pre.highlight { border-radius: 5px; } +body.dark-mode { + color: #d8d8d8; + background-color: #1b1b1b; +} + +body.dark-mode .text-muted { + color: #929aa0 !important; +} + @media (max-width: 576px) { .top-content { diff --git a/web/style/dark.css b/web/style/dark.css deleted file mode 100644 index 636c1ad..0000000 --- a/web/style/dark.css +++ /dev/null @@ -1,8 +0,0 @@ -body { - color: #d8d8d8; - background-color: #1b1b1b; -} - -.text-muted { - color: #929aa0 !important; -}