feat: toggleable, two-tone light/dark mode
This commit is contained in:
parent
1f42e05396
commit
a1489414f0
SSH Key Fingerprint:
SHA256:vCxDSu/DvGebbNiQjCVzOuxKmT8ODOzaLx+dTRtawyk
@ -132,7 +132,7 @@
|
|||||||
--color-white: #fff;
|
--color-white: #fff;
|
||||||
|
|
||||||
/* Body */
|
/* Body */
|
||||||
--color-body: #fff;
|
--color-body: #f7f7f5;
|
||||||
--color-body-partial: #fff;
|
--color-body-partial: #fff;
|
||||||
|
|
||||||
/* Border */
|
/* Border */
|
||||||
@ -149,31 +149,9 @@
|
|||||||
--opacity-one: .8;
|
--opacity-one: .8;
|
||||||
--opacity-two: 1;
|
--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 version
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
|
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
.dark-mode,
|
.dark-mode {
|
||||||
.is-partial-dark {
|
|
||||||
--color-font-one: #f7f7f5;
|
--color-font-one: #f7f7f5;
|
||||||
--color-font-two: #1a1b1e;
|
--color-font-two: #1a1b1e;
|
||||||
--color-font-three: #f7f7f5;
|
--color-font-three: #f7f7f5;
|
||||||
@ -196,7 +174,7 @@
|
|||||||
--color-fourteen: #2b2d31;
|
--color-fourteen: #2b2d31;
|
||||||
--color-white: #f7f7f5;
|
--color-white: #f7f7f5;
|
||||||
--color-body: #1a1b1e;
|
--color-body: #1a1b1e;
|
||||||
--color-body-partial: #1a1b1e;
|
--color-body-partial: #151619;
|
||||||
--color-border-one: #4b4f52;
|
--color-border-one: #4b4f52;
|
||||||
--color-border-two: #4b4f52;
|
--color-border-two: #4b4f52;
|
||||||
--color-border-three: #5e6265;
|
--color-border-three: #5e6265;
|
||||||
@ -204,103 +182,6 @@
|
|||||||
--opacity-two: .9;
|
--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
|
/* Hiding 'Portal' notifications
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
|
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
iframe[title="portal-notification"] {
|
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) {
|
.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
|
/* 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;
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -2,6 +2,10 @@
|
|||||||
<div class="header-wrap global-padding">
|
<div class="header-wrap global-padding">
|
||||||
<div class="header-logo">{{>logo}}</div>
|
<div class="header-logo">{{>logo}}</div>
|
||||||
<div class="header-nav is-button-accent-color">
|
<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}}
|
{{>search is_mobile=true}}
|
||||||
<input id="toggle" class="header-checkbox" type="checkbox">
|
<input id="toggle" class="header-checkbox" type="checkbox">
|
||||||
<label class="header-toggle" for="toggle">
|
<label class="header-toggle" for="toggle">
|
||||||
|
|||||||
1
partials/icons/site/moon.hbs
Normal file
1
partials/icons/site/moon.hbs
Normal 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>
|
||||||
|
After Width: | Height: | Size: 233 B |
1
partials/icons/site/sun.hbs
Normal file
1
partials/icons/site/sun.hbs
Normal 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>
|
||||||
|
After Width: | Height: | Size: 611 B |
@ -18,6 +18,10 @@
|
|||||||
{{/if}}
|
{{/if}}
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
{{>search is_desktop=true}}
|
{{>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}}
|
{{>members/login_panel}}
|
||||||
</ul>
|
</ul>
|
||||||
{{else}}
|
{{else}}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user