diff options
author | Yurizal Susanto <rizalsagi@gmail.com> | 2021-12-26 17:05:36 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-12-26 17:05:36 +0300 |
commit | 80fe33f0bbdc6679bea767df3efac22298b3879e (patch) | |
tree | c2766dd7b4e5809125d278ac0b5e2bcdbf105832 | |
parent | 1d72c7889ba156d7776ee18dcb77570d950cc7c8 (diff) | |
parent | 335e3699615fbfb5c50a4541b8fca3f9839ae866 (diff) |
Merge pull request #22 from jerrylususu/master
[feat] Add dark mode support
-rw-r--r-- | README.md | 3 | ||||
-rw-r--r-- | layouts/partials/meta.html | 2 | ||||
-rw-r--r-- | layouts/partials/navbar.html | 1 | ||||
-rw-r--r-- | static/css/dark.css | 13 | ||||
-rw-r--r-- | static/img/moon.svg | 4 | ||||
-rw-r--r-- | static/img/sun.svg | 4 | ||||
-rw-r--r-- | static/js/dark-mode.js | 35 |
7 files changed, 62 insertions, 0 deletions
@@ -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) @@ -152,3 +153,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/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 @@ <link rel="stylesheet" href="{{ . }}"/> {{ end }} + <script defer src="/js/dark-mode.js"></script> + <link disabled id="dark-mode-theme" rel="stylesheet" href="/css/dark.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono|Lato|Raleway"> {{ 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 @@ </a> </li> {{- end -}} + <li><img class="icon-text" id="dark-mode-toggle" src="/img/moon-regular.svg" alt="Toggle Dark Mode"></a></li> {{- range .Site.Menus.main -}} <li><a href="{{ .URL }}">{{ .Name | title }}</a></li> {{- end -}} diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..9469755 --- /dev/null +++ b/static/css/dark.css @@ -0,0 +1,13 @@ +html { + background-color: #ebebeb !important; +} + +html { +filter: invert(100%) hue-rotate(180deg); +} + +img:not(.icon-text, .icon-social), +video, +code { +filter: invert(100%) hue-rotate(180deg) contrast(100%); +} diff --git a/static/img/moon.svg b/static/img/moon.svg new file mode 100644 index 0000000..2623458 --- /dev/null +++ b/static/img/moon.svg @@ -0,0 +1,4 @@ +<!-- + “Moon Icon” by Font Awesome is licensed under CC BY 4.0. https://fontawesome.com/license/free +--> +<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"></path></svg>
\ No newline at end of file diff --git a/static/img/sun.svg b/static/img/sun.svg new file mode 100644 index 0000000..4de0967 --- /dev/null +++ b/static/img/sun.svg @@ -0,0 +1,4 @@ +<!-- + “Sun Icon” by Font Awesome is licensed under CC BY 4.0. https://fontawesome.com/license/free +--> +<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M494.2 221.9l-59.8-40.5 13.7-71c2.6-13.2-1.6-26.8-11.1-36.4-9.6-9.5-23.2-13.7-36.2-11.1l-70.9 13.7-40.4-59.9c-15.1-22.3-51.9-22.3-67 0l-40.4 59.9-70.8-13.7C98 60.4 84.5 64.5 75 74.1c-9.5 9.6-13.7 23.1-11.1 36.3l13.7 71-59.8 40.5C6.6 229.5 0 242 0 255.5s6.7 26 17.8 33.5l59.8 40.5-13.7 71c-2.6 13.2 1.6 26.8 11.1 36.3 9.5 9.5 22.9 13.7 36.3 11.1l70.8-13.7 40.4 59.9C230 505.3 242.6 512 256 512s26-6.7 33.5-17.8l40.4-59.9 70.9 13.7c13.4 2.7 26.8-1.6 36.3-11.1 9.5-9.5 13.6-23.1 11.1-36.3l-13.7-71 59.8-40.5c11.1-7.5 17.8-20.1 17.8-33.5-.1-13.6-6.7-26.1-17.9-33.7zm-112.9 85.6l17.6 91.2-91-17.6L256 458l-51.9-77-90.9 17.6 17.6-91.2-76.8-52 76.8-52-17.6-91.2 91 17.6L256 53l51.9 76.9 91-17.6-17.6 91.1 76.8 52-76.8 52.1zM256 152c-57.3 0-104 46.7-104 104s46.7 104 104 104 104-46.7 104-104-46.7-104-104-104zm0 160c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"></path></svg>
\ 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 |