diff options
author | Rohan Verma <hello@rohanverma.net> | 2020-09-18 22:59:27 +0300 |
---|---|---|
committer | Rohan Verma <hello@rohanverma.net> | 2020-09-18 22:59:27 +0300 |
commit | c85ba0eb040810586e66350b9ff390bc20c50244 (patch) | |
tree | 7600e39858b7536cbed51acb43cac9e0cd50435e | |
parent | 911e80fe6eb592b7ec7873dc286af14474c130d4 (diff) |
feat: Add dark mode toggle to menu
This commit adds support for dark-mode.
It changes the css to use vars which are toggled
based on data stored in local storage. The state can be modified
by the buttons in the menu.
-rw-r--r-- | layouts/partials/menu.html | 6 | ||||
-rw-r--r-- | static/css/style.css | 94 | ||||
-rw-r--r-- | static/js/main.js | 19 |
3 files changed, 98 insertions, 21 deletions
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 4fbf912..856d4b1 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -16,6 +16,12 @@ <i data-feather="{{ $key.icon }}"></i> </a> {{- end -}} + <a onclick="toggleTheme('dark');"> + <i data-feather="moon"></i> + </a> + <a onclick="toggleTheme('light');"> + <i data-feather="sun"></i> + </a> {{if eq $currentPage.Params.url "/search/" }}<b>{{end}} {{if and (not (isset .Site.Params "disableSearch")) (not (eq .Site.Params.disableSearch true)) }} <a href="{{ "/search" | relURL }}">search<svg aria-hidden="true" class="i-search" viewBox="0 0 32 32" width="10" height="10" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><circle cx="14" cy="14" r="12"></circle><path d="M23 23l7 7"></path></svg></a> diff --git a/static/css/style.css b/static/css/style.css index 167c877..7d16bbc 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -3,18 +3,66 @@ /* Forked from: https://suckless.org/pub/style.css */ +/* Colors */ +:root { + --background-primary: #eee; + --color-primary: #000; + --color-link: #005386; + --nav-link-a-hover: #eee; + --menu-color: #1a9900; + --menu-background-color: #557515; + --menu-border-top-color: #ccc; + --menu-border-bottom-color: #1a9900; + --menu-a-color: #fff; + --menu-a-hover-background-color: #1a9900; + --header-background-color: #eee; + --header-color: #555; + --headerlink-color: #109166; + --main-border-left: rgba(0,0,0,0.1); + --main-background: #fefefe; + --table-color: #778087; + --table-border-color: #ccc; + --table-tbody-firstchild-color: #333; + --light-color: #646464; + --hr-border-color: rgba(0,0,0,0.1); +} + +html[data-theme='dark'] { + --background-primary: rgb(14, 15, 16); + --color-primary: rgb(232, 230, 227); + --color-link: rgb(110, 200, 255); + --nav-link-a-hover: rgb(34, 36, 38); + --menu-color: rgb(124, 255, 97); + --menu-background-color: rgb(68, 94, 17); + --menu-border-top-color: rgb(62, 68, 70); + --menu-border-bottom-color: rgb(36, 209, 0); + --menu-a-color: rgb(232, 230, 227); + --menu-a-hover-background-color: rgb(21, 122, 0); + --header-background-color: rgb(34, 36, 38); + --header-color: rgb(178, 172, 162); + --headerlink-color: #109166; + --main-border-left: rgba(140, 130, 115, 0.1); + --main-background: #1e1e1e; + --table-color: rgb(152, 143, 129); + --table-border-color: #545b5e; + --table-tbody-firstchild-color: rgb(62, 68, 70); + --light-color:rgb(169, 161, 150); + --hr-border-color: rgba(140, 130, 115, 0.1); +} + +/* Design */ html { height: 100%; margin: 0; } body { - background-color: #fff; - color: #000; + background-color: var(--background-primary); + color: var(--color-primary); font-family: "Inter", sans-serif; padding: 0; margin: 0; - height: 100%; + height: max-content; line-height: 1.6em; font-size: 1.1em; } @@ -28,7 +76,7 @@ pre, code { } a { - color: #005386; + color: var(--color-link); padding: 2px; text-decoration: none; } @@ -42,38 +90,38 @@ a:hover { } #nav a:hover { - background-color: #eee; + background-color: var(--nav-link-a-hover); } #menu { clear: both; - color: #1a9900; overflow: hidden; - background-color: #557515; padding: 0.7ex; - border-top: 1px solid #ccc; - border-bottom: 1px solid #1a9900; + color: var(--menu-color); + background-color: var(--menu-background-color); + border-top: 1px solid var(--menu-border-top); + border-bottom: 1px solid var(--menu-border-bottom-color); } #menu a { padding: 0.5ex 1ex; - color: #fff; + color: var(--menu-a-color); } #menu a:hover { - background-color: #1a9900; + background-color: var(--menu-a-hover-background-color); } #header { - background-color: #eee; + background-color: var(--header-background-color); clear: both; - color: #555; + color: var(--header-color); font-size: 1.78em; padding: 0.7ex 0.7ex 0.7ex 0.7em; } #headerLink { - color: #109166; + color: var(--headerlink-color); margin-left: 5px; } @@ -159,7 +207,9 @@ h6 { max-width: 600px; padding: 1.5em; padding-top: 0em; - border-left: 1px solid rgba(0, 0, 0, 0.1); + border-left: 1px solid var(--main-border-left); + background: var(--main-background); + height: max-content; } .left { @@ -194,12 +244,12 @@ table { width:100%; border-collapse:collapse; margin:1.75rem 0; - color:#778087 + color: var(--table-color); } table td, table th { vertical-align:top; - border:1px solid #ccc; + border:1px solid var(--table-border-color); padding:10px } table thead th { @@ -207,7 +257,7 @@ table thead th { } table tbody td:first-child { font-weight:700; - color:#333; + color:var(--table-tbody-firstchild-color); } pre { @@ -218,7 +268,7 @@ pre { } .light { - color: #646464; + color: var(--light-color); } #pagination { @@ -234,7 +284,7 @@ pre { hr { border: 0; height: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid var(--hr-border-color); } img { @@ -268,4 +318,8 @@ img { width: 100%; border-bottom: 1px solid rgba(0,0,0,0.1); } + + .right { + float: left; + } } diff --git a/static/js/main.js b/static/js/main.js index 5504784..63ee4a4 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,4 +1,21 @@ let element = document.getElementById("main"); if (document.body.clientWidth < 632) { element.scrollIntoView({behavior: "smooth"}); -}
\ No newline at end of file +} + + +// Set the theme +// Ref: https://livecodestream.dev/post/2020-08-06-a-better-approach-to-dark-mode-on-your-website/ +// Capture the current theme from local storage and adjust the page to use the current theme. +const htmlEl = document.getElementsByTagName('html')[0]; +const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; + +if (currentTheme) { + htmlEl.dataset.theme = currentTheme; +} + +// When the user changes the theme, we need to save the new value on local storage +const toggleTheme = (theme) => { + htmlEl.dataset.theme = theme; + localStorage.setItem('theme', theme); +} |