ghostcms/basho
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: toggleable, two-tone light/dark mode

Browse Source
This commit is contained in:
Tom Vines 2025-08-03 19:25:19 +10:00
parent 1f42e05396
commit a1489414f0
Signed by: dragonwocky
SSH Key Fingerprint: SHA256:vCxDSu/DvGebbNiQjCVzOuxKmT8ODOzaLx+dTRtawyk
6 changed files with 88 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
assets/css/screen.css
View File

@ -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,
.is-partial-dark {
.dark-mode {
--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;
}

3
assets/js/global.js
View File

@ -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()}));

4
partials/header.hbs
View File

@ -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">

1
partials/icons/site/moon.hbs Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

1
partials/icons/site/sun.hbs Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 611 B

4
partials/navigation.hbs
View File

@ -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}}