From 29e76564318b29fe0351cc890c939d5299a46f6f Mon Sep 17 00:00:00 2001 From: Neko Null Date: Sat, 18 Dec 2021 17:07:19 +0300 Subject: [feat] Add dark mode support --- layouts/partials/meta.html | 2 ++ layouts/partials/navbar.html | 1 + static/css/dark.css | 13 +++++++++++++ static/img/moon.svg | 1 + static/img/sun.svg | 1 + static/js/dark-mode.js | 35 +++++++++++++++++++++++++++++++++++ 6 files changed, 53 insertions(+) create mode 100644 static/css/dark.css create mode 100644 static/img/moon.svg create mode 100644 static/img/sun.svg create mode 100644 static/js/dark-mode.js diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html index aa52105..094bf03 100644 --- a/layouts/partials/meta.html +++ b/layouts/partials/meta.html @@ -15,6 +15,8 @@ {{ end }} + + {{ if .Site.Params.HighlightJs }} diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index c0f97fa..944b224 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -7,6 +7,7 @@ {{- end -}} +
  • Toggle Dark Mode
    • {{- range .Site.Menus.main -}}
  • {{ .Name | title }}
    • {{- end -}} diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..c5b340c --- /dev/null +++ b/static/css/dark.css @@ -0,0 +1,13 @@ +html { + background-color: #ebebeb !important; +} + +html { +filter: invert(1) hue-rotate(.5turn); +} + +img:not(.icon-text, .icon-social), +video, +code { +filter: hue-rotate(180deg) contrast(100%) invert(100%); +} diff --git a/static/img/moon.svg b/static/img/moon.svg new file mode 100644 index 0000000..468f431 --- /dev/null +++ b/static/img/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/sun.svg b/static/img/sun.svg new file mode 100644 index 0000000..b13a630 --- /dev/null +++ b/static/img/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/js/dark-mode.js b/static/js/dark-mode.js new file mode 100644 index 0000000..5a67798 --- /dev/null +++ b/static/js/dark-mode.js @@ -0,0 +1,35 @@ +var toggle = document.getElementById("dark-mode-toggle"); +var darkTheme = document.getElementById("dark-mode-theme"); + +// probe system default dark mode setting +var systemDefault = null +if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + systemDefault = "dark"; +} else { + systemDefault = "light"; +} + +// use user preference if possible +var savedTheme = localStorage.getItem("dark-mode-storage") || systemDefault; +setTheme(savedTheme); + +toggle.addEventListener("click", () => { + if (toggle.src.endsWith("/img/moon.svg") ) { + setTheme("dark"); + } else if (toggle.src.endsWith("/img/sun.svg") ) { + setTheme("light"); + } + +}); + +function setTheme(mode) { + localStorage.setItem("dark-mode-storage", mode); + + if (mode === "dark") { + darkTheme.disabled = false; + toggle.src = "/img/sun.svg"; + } else if (mode === "light") { + darkTheme.disabled = true; + toggle.src = "/img/moon.svg"; + } +} \ No newline at end of file -- cgit v1.2.3 From 88eb3bb1f7707585e853ba3299fd6f1c534b6344 Mon Sep 17 00:00:00 2001 From: Neko Null Date: Sat, 18 Dec 2021 17:20:49 +0300 Subject: [fix] Make CSS filter usage more consistent --- static/css/dark.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/css/dark.css b/static/css/dark.css index c5b340c..9469755 100644 --- a/static/css/dark.css +++ b/static/css/dark.css @@ -3,11 +3,11 @@ html { } html { -filter: invert(1) hue-rotate(.5turn); +filter: invert(100%) hue-rotate(180deg); } img:not(.icon-text, .icon-social), video, code { -filter: hue-rotate(180deg) contrast(100%) invert(100%); +filter: invert(100%) hue-rotate(180deg) contrast(100%); } -- cgit v1.2.3 From 0c43495b80728bd6460a60f5128865db87d6f18f Mon Sep 17 00:00:00 2001 From: Neko Null Date: Wed, 22 Dec 2021 09:17:33 +0300 Subject: add font awesome icon license --- README.md | 2 ++ static/img/moon.svg | 3 +++ static/img/sun.svg | 3 +++ 3 files changed, 8 insertions(+) diff --git a/README.md b/README.md index 45c2422..76b2cfd 100644 --- a/README.md +++ b/README.md @@ -152,3 +152,5 @@ If you found bug, or anything that itch you. Tell me! or maybe make PR. ## License Manis is licensed under the MIT License. Check the [LICENSE](https://github.com/yursan9/manis-hugo-theme/blob/master/LICENSE.md) file for details. + +“Moon Icon” and “Sun Icon” by Font Awesome are [licensed under CC BY 4.0](https://fontawesome.com/license/free). \ No newline at end of file diff --git a/static/img/moon.svg b/static/img/moon.svg index 468f431..2623458 100644 --- a/static/img/moon.svg +++ b/static/img/moon.svg @@ -1 +1,4 @@ + \ No newline at end of file diff --git a/static/img/sun.svg b/static/img/sun.svg index b13a630..4de0967 100644 --- a/static/img/sun.svg +++ b/static/img/sun.svg @@ -1 +1,4 @@ + \ No newline at end of file -- cgit v1.2.3 From 335e3699615fbfb5c50a4541b8fca3f9839ae866 Mon Sep 17 00:00:00 2001 From: Neko Null Date: Wed, 22 Dec 2021 09:18:42 +0300 Subject: add "dark mode" to README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 76b2cfd..14d3240 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ Like I said, it's really minimal. Its doesn't even have grid or anything nice li - Disqus Support. - [Utterances](https://utteranc.es) Support. - Translatable. +- Dark Mode Support. ![Manis' Homepage view](https://raw.githubusercontent.com/yursan9/manis-hugo-theme/master/images/blue-red.png) -- cgit v1.2.3