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;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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
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}}
|
||||
{{/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}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user