feat: toggleable, two-tone light/dark mode

assets/css/screen.css

@@ -132,7 +132,7 @@
    --color-white: #fff;
 
    /* Body */
-   --color-body: #fff;
+   --color-body: #f7f7f5;
    --color-body-partial: #fff;
 
    /* Border */
@@ -149,31 +149,9 @@
    --opacity-one: .8;
    --opacity-two: 1;
 }
-
-/* Partial version
-   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
-.partial-dark-mode,
-.auto-partial-dark-mode {
-   --color-font-two: #f7f7f5;
-   --color-one: #e8e8e6;
-   --color-two: #d9d9d8;
-   --color-six: #f7f7f5;
-   --color-eight: #e8e8e6;
-   --color-eleven: #e8e8e6;
-   --color-thirteen: #e2e2df;
-   --color-fourteen: #e8e8e6;
-   --color-white: #f7f7f5;
-   --color-body: #f7f7f5;
-   --color-border-one: #d9d9d8;
-   --color-border-two: #d9d9d8;
-   --opacity-one: .7;
-   --opacity-two: 1;
-}
-
 /* Dark version
    –––––––––––––––––––––––––––––––––––––––––––––––––––– */
-.dark-mode,
+.dark-mode {
-.is-partial-dark {
    --color-font-one: #f7f7f5;
    --color-font-two: #1a1b1e;
    --color-font-three: #f7f7f5;
@@ -196,7 +174,7 @@
    --color-fourteen: #2b2d31;
    --color-white: #f7f7f5;
    --color-body: #1a1b1e;
-   --color-body-partial: #1a1b1e;
+   --color-body-partial: #151619;
    --color-border-one: #4b4f52;
    --color-border-two: #4b4f52;
    --color-border-three: #5e6265;
@@ -204,103 +182,6 @@
    --opacity-two: .9;
 }
 
-/* Automatic dark version [duplicate dark version]
-   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
-@media (prefers-color-scheme:dark) {
-   .auto-dark-mode,
-   .auto-partial-dark-mode {
-      --color-font-one: #f7f7f5;
-      --color-font-two: #1a1b1e;
-      --color-font-three: #f7f7f5;
-      --color-font-four: #1a1b1e;
-      --color-font-five: #f7f7f5;
-      --color-font-six: #1a1b1e;
-      --color-one: #2b2d31;
-      --color-two: #34363a;
-      --color-three: #f7f7f5;
-      --color-four: #f7f7f5;
-      --color-five: #f7f7f5;
-      --color-six: #1a1b1e;
-      --color-seven: #f7f7f5;
-      --color-eight: #2b2d31;
-      --color-nine: #212225;
-      --color-ten: #212225;
-      --color-eleven: #292a2d;
-      --color-twelve: #2b2d31;
-      --color-thirteen: #34363a;
-      --color-fourteen: #2b2d31;
-      --color-white: #f7f7f5;
-      --color-body: #1a1b1e;
-      --color-body-partial: #1a1b1e;
-      --color-border-one: #4b4f52;
-      --color-border-two: #4b4f52;
-      --color-border-three: #5e6265;
-      --opacity-one: .5;
-      --opacity-two: .9;
-   }
-
-}
-
-body .is-partial-color:not(.is-partial-dark) {
-   --color-font-one: #151618;
-   --color-font-two: #fff;
-   --color-font-four: #151618;
-   --color-font-five: #fff;
-   --color-one: rgba(0, 0, 0, .07);
-   --color-two: rgba(0, 0, 0, .12);
-   --color-three: #151618;
-   --color-four: #fff;
-   --color-five: #151618;
-   --color-six: #151618;
-   --color-nine: #fff;
-   --color-eleven: rgba(0, 0, 0, .07);
-   --color-twelve: #fff;
-   --color-body: #fff;
-   --color-body-partial: var(--ghost-bg-color);
-   --color-border-one: rgba(0, 0, 0, .3);
-   --opacity-one: .8;
-   --opacity-two: 1;
-}
-
-.dark-mode .is-partial-color:not(.is-partial-dark) {
-   --color-font-three: #f7f7f5;
-   --color-font-four: #f7f7f5;
-   --color-font-five: #151618;
-   --color-four: #151618;
-   --color-six: #f7f7f5;
-   --color-nine: rgba(0, 0, 0, .07);
-   --color-twelve: rgba(0, 0, 0, .07);
-   --color-body: #151618;
-}
-
-@media (prefers-color-scheme:dark) {
-   .auto-dark-mode .is-partial-color:not(.is-partial-dark) {
-      --color-font-three: #f7f7f5;
-      --color-font-four: #f7f7f5;
-      --color-font-five: #151618;
-      --color-four: #151618;
-      --color-six: #f7f7f5;
-      --color-nine: rgba(0, 0, 0, .07);
-      --color-twelve: rgba(0, 0, 0, .07);
-      --color-body: #151618;
-   }
-
-}
-
-/* Logo for dark version
-   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
-@media (prefers-color-scheme:dark) {
-   .auto-dark-mode a.is-dark + a {
-      display: none;
-   }
-}
-
-@media (prefers-color-scheme:light) {
-   .auto-dark-mode a.is-dark {
-      display: none;
-   }
-}
-
 /* Hiding 'Portal' notifications
    –––––––––––––––––––––––––––––––––––––––––––––––––––– */
 iframe[title="portal-notification"] {
@@ -3272,7 +3153,7 @@ textarea::placeholder {
 }
 
 .kg-card.kg-product-card :is(.kg-product-card-container > div , .kg-product-card-container > div a) {
-   color: var(--color-font-black);
+   color: var(--color-font-one);
 }
 
 /* NFT
@@ -5765,3 +5646,73 @@ textarea::placeholder {
    }
 
 }
+
+.header-nav .theme-toggle {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+}
+.header-nav .theme-toggle.is-desktop {
+  margin-left: 0.8vw;
+}
+.header-nav .theme-toggle svg {
+  color: var(--color-font-one);
+  fill: none;
+}
+.header-nav .theme-toggle.is-mobile,
+html:not(.light-dark-mode) .header-nav .theme-toggle,
+html.dark-mode .header-nav .theme-toggle .if-is-light,
+html:not(.dark-mode) .header-nav .theme-toggle .if-is-dark {
+  display: none;
+}
+@media (min-width: 1025px) {
+  .header-nav .theme-toggle:hover svg {
+    fill: var(--color-font-one);
+  }
+}
+@media (max-width: 1024px) {
+  .light-dark-mode .header-logo {
+    flex-basis: 60%;
+  }
+  .light-dark-mode .header-nav {
+    flex-basis: 40%;
+  }
+  .header-nav .theme-toggle.is-mobile {
+    display: block;
+    position: absolute;
+    top: 9px;
+    right: 84px;
+  }
+  .header-nav .theme-toggle.is-desktop {
+    display: none;
+  }
+}
+
+.post-header-container {
+  border-bottom: var(--border) var(--color-border-one);
+  padding-bottom: 4vh;
+  margin-bottom: 8vh;
+}
+.post-header-container .post-header-content,
+.post-header-container .post-header-image {
+  margin: auto;
+}
+
+.kg-callout-card-white,
+.kg-product-card-container,
+.kg-file-card-container {
+   background-color: var(--color-body-partial) !important;
+   border-color: var(--color-border-one) !important;
+   color: var(--color-font-one) !important;
+}
+.kg-file-card-container,
+.kg-file-card-icon {
+  min-height: auto !important;
+}
+.kg-file-card-icon svg {
+  color: var(--color-font-one);
+}
+.kg-file-card-icon::before {
+  display: none;
+}

assets/js/global.js

@@ -17,3 +17,6 @@ var e,t;e=this,t=function(){"use strict";function e(t){return(e="function"==type
 
 /* Search function */
 document.addEventListener("DOMContentLoaded",function(){!function(e){"use strict";const t=document.body,n=document.querySelector(".search-section"),s=document.querySelectorAll(".search-open"),i=document.querySelector(".search-close"),c=document.querySelector(".search-input"),a=document.querySelector(".search-info"),o=document.querySelector(".search-counter"),r=document.querySelector(".search-results"),d=document.querySelector(".search-counter-results"),l=document.querySelector(".search-overlay");if(n){function u(){t.classList.remove("search-is-active"),t.classList.add("search-no-active"),c.value="",r.innerHTML="",o.classList.add("is-hide"),a.classList.remove("is-hide"),window.scrollTo(0,0)}t.addEventListener("keyup",function(e){27==e.keyCode&&u()}),i.addEventListener("click",u),l.addEventListener("click",u),s.forEach(function(s){s.addEventListener("click",function(){t.classList.add("search-is-active"),t.classList.remove("search-no-active"),n.style.display="block",c.focus()}),s.addEventListener("click",function(){if(!1===m){var t=options.api,n=new XMLHttpRequest;n.open("GET",t,!0),n.onload=function(){var e,t;n.status>=200&&n.status<400&&(n.response,e=JSON.parse(n.responseText),t=new Fuse(e.posts,options),c.onkeyup=function(e){if(d.innerHTML="",r.innerHTML="",this.value.length>2&&(a.classList.add("is-hide"),o.classList.remove("is-hide")),this.value.length<3&&(a.classList.remove("is-hide"),o.classList.add("is-hide")),!(this.value.length<=2)){const n=t.search(e.target.value,{limit:options.limit});d.innerHTML=n.length,n.map(function(e){var t=new Date(e.item.published_at).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}),n=document.createElement("time"),s=document.createElement("h5"),i=document.createElement("span"),c=document.createElement("a");if(!0===options.images){var a=document.createElement("img");null!==e.item.feature_image&&(a.setAttribute("src",e.item.feature_image),c.appendChild(a))}n.textContent=n.innerHTML+=t,i.textContent=e.item.title,c.setAttribute("href",e.item.url),s.appendChild(i),r.appendChild(c),c.appendChild(s),c.appendChild(n)})}})},n.send(),s.removeEventListener("click",e)}m=!0})});var m=!1}}(window)});
+
+/* Light/dark mode toggle */
+document.addEventListener("DOMContentLoaded",(()=>{const{classList:e}=document.documentElement;if(!e.contains("light-dark-mode"))return;const t="(prefers-color-scheme: dark)",d=()=>{const e=localStorage.getItem("theme"),d=window.matchMedia&&window.matchMedia(t).matches;return"dark"===e||"light"!==e&&d},a=()=>e[d()?"add":"remove"]("dark-mode");window.matchMedia(t)?.addEventListener("change",a),document.querySelectorAll("header .theme-toggle").forEach((e=>e.addEventListener("click",(()=>{localStorage.setItem("theme",d()?"light":"dark"),a()})))),a()}));

partials/header.hbs

@@ -2,6 +2,10 @@
 	<div class="header-wrap global-padding">
 		<div class="header-logo">{{>logo}}</div>
 		<div class="header-nav is-button-accent-color">
+			<span role="button" class="theme-toggle is-mobile">
+				<span class="if-is-dark">{{>icons/site/sun}}</span>
+				<span class="if-is-light">{{>icons/site/moon}}</span>
+			</span>
 			{{>search is_mobile=true}}
 			<input id="toggle" class="header-checkbox" type="checkbox">
 			<label class="header-toggle" for="toggle">

partials/icons/site/moon.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></svg>

partials/icons/site/sun.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>

partials/navigation.hbs

@@ -18,6 +18,10 @@
 	{{/if}}
 	{{/foreach}}
 	{{>search is_desktop=true}}
+	<li role="button" class="theme-toggle is-desktop">
+		<span class="if-is-dark">{{>icons/site/sun}}</span>
+		<span class="if-is-light">{{>icons/site/moon}}</span>
+	</li>
 	{{>members/login_panel}}
 </ul>
 {{else}}