mentos1386/mnts.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Auto dark mode

Browse source
This commit is contained in:
Sodbileg Gansukh 2022-05-27 14:46:30 +08:00
parent 0e78d9ed40
commit 9ebb26559a
5 changed files with 165 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/built/screen.css
View file

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View file

File diff suppressed because one or more lines are too long

164
assets/css/screen.css
View file

@ -1818,10 +1818,6 @@ html.dark-mode .post-full-image {
background-color: color-mod(var(--color-darkmode) l(+8%));
}
html.dark-mode .article-byline {
border-top-color: color-mod(var(--color-darkmode) l(+15%));
}
html.dark-mode .article-byline-meta .author-name a {
color: #fff;
}
@ -1918,6 +1914,166 @@ html.dark-mode .footer-cta-title {
color: #fff;
}
@media (prefers-color-scheme: dark) {
html.auto-color body {
color: rgba(255, 255, 255, 0.75);
background: var(--color-darkmode);
}
html.auto-color img {
opacity: 0.9;
}
html.auto-color kbd {
background: color-mod(var(--color-darkmode) l(+5%));
}
html.auto-color figcaption a {
color: #fff;
}
html.auto-color .gh-head {
background: var(--color-darkmode);
color: #fff;
}
html.auto-color .gh-burger-box {
color: #fff;
}
html.auto-color .site-header-content {
color: #fff;
}
html.auto-color .post-card-image {
background: var(--color-darkmode);
}
html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
color: color-mod(var(--color-secondary-text) l(-22%));
}
html.auto-color .post-card-featured {
color: #fff;
}
html.auto-color .post-card-title {
color: #fff;
}
html.auto-color .post-card-excerpt {
color: var(--color-secondary-text);
}
html.auto-color .article-title {
color: #fff;
}
html.auto-color .article-excerpt {
color: var(--color-secondary-text);
}
html.auto-color .post-full-image {
background-color: color-mod(var(--color-darkmode) l(+8%));
}
html.auto-color .article-byline-meta .author-name a {
color: #fff;
}
html.auto-color .no-image .author-social-link a {
color: rgba(255, 255, 255, 0.75);
}
html.auto-color .gh-content > [id] {
color: rgba(255, 255, 255, 0.9);
}
html.auto-color .gh-content pre {
background: color-mod(var(--color-darkgrey) l(-8%));
}
html.auto-color .gh-content :not(pre) > code {
background: color-mod(var(--color-darkgrey) l(+6%));
border-color: color-mod(var(--color-darkmode) l(+8%));
color: var(--color-wash);
}
html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
color: #fff;
}
html.auto-color .gh-content strong {
color: #fff;
}
html.auto-color .gh-content em {
color: #fff;
}
html.auto-color .gh-content code {
color: #fff;
background: #000;
}
html.auto-color hr {
border-top-color: color-mod(var(--color-darkmode) l(+8%));
}
html.auto-color .gh-content hr:after {
background: color-mod(var(--color-darkmode) l(+8%));
box-shadow: var(--color-darkmode) 0 0 0 5px;
}
html.auto-color figcaption {
color: rgba(255, 255, 255, 0.6);
}
html.auto-color .gh-content table td:first-child {
background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
}
html.auto-color .gh-content table td:last-child {
background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
}
html.auto-color .gh-content table th {
color: rgba(255, 255, 255, 0.85);
background-color: color-mod(var(--color-darkmode) l(+8%));
}
html.auto-color .gh-content table th,
html.auto-color .gh-content table td {
border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
}
html.auto-color .gh-content input {
color: color-mod(var(--color-midgrey) l(-30%));
}
html.auto-color .site-archive-header .no-image {
color: rgba(255, 255, 255, 0.9);
background: var(--color-darkmode);
}
html.auto-color .kg-header-card.kg-style-dark {
background: color-mod(var(--color-darkgrey) l(-5%));
}
html.auto-color .kg-header-card.kg-style-light {
background: color-mod(var(--color-darkgrey) l(+5%));
}
html.auto-color .kg-header-card h2.kg-header-card-header,
html.auto-color .kg-header-card h3.kg-header-card-subheader {
color: #fff;
}
html.auto-color .footer-cta-title {
color: #fff;
}
}
/*
Hey! You reached the end.

2
default.hbs
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}>
<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{else match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
<head>
{{!-- Basic meta - advanced meta is output with {ghost_head} below --}}

3
package.json
View file

@ -139,7 +139,8 @@
"type": "select",
"options": [
"Light",
"Dark"
"Dark",
"Auto"
],
"default": "Light"
},