Disable dark mode with code injection

It's now possible to disable the dark mode with code injection instead of removing the CSS and rebuilding it, by simply adding a class no-dark to html element.
This commit is contained in:
Sodbileg Gansukh 2021-02-01 12:04:53 +08:00
parent bcfbc21b8e
commit df4bfbffb2
3 changed files with 64 additions and 64 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -2890,229 +2890,229 @@ Usage (In Ghost editor):
/* 12. Dark Mode /* 12. Dark Mode
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { html:not(.no-dark) body {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
background: var(--darkmode); background: var(--darkmode);
} }
img { html:not(.no-dark) img {
opacity: 0.9; opacity: 0.9;
} }
.site-header-background:before { html:not(.no-dark) .site-header-background:before {
background: rgba(0,0,0,0.6); background: rgba(0,0,0,0.6);
} }
.post-feed { html:not(.no-dark) .post-feed {
background: var(--darkmode); background: var(--darkmode);
} }
.post-card, html:not(.no-dark) .post-card,
.post-card:hover { html:not(.no-dark) .post-card:hover {
border-bottom-color: color-mod(var(--darkmode) l(+8%)); border-bottom-color: color-mod(var(--darkmode) l(+8%));
} }
.author-profile-image { html:not(.no-dark) .author-profile-image {
background: var(--darkmode); background: var(--darkmode);
} }
.post-card-byline-content a { html:not(.no-dark) .post-card-byline-content a {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.post-card-byline-content a:hover { html:not(.no-dark) .post-card-byline-content a:hover {
color: #fff; color: #fff;
} }
.post-card-image { html:not(.no-dark) .post-card-image {
background: var(--darkmode); background: var(--darkmode);
} }
.post-card-title { html:not(.no-dark) .post-card-title {
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
} }
.post-card-excerpt { html:not(.no-dark) .post-card-excerpt {
color: color-mod(var(--midgrey) l(+10%)); color: color-mod(var(--midgrey) l(+10%));
} }
.author-avatar, html:not(.no-dark) .author-avatar,
.static-avatar { html:not(.no-dark) .static-avatar {
border-color: color-mod(var(--darkgrey) l(+2%)); border-color: color-mod(var(--darkgrey) l(+2%));
} }
.site-main, html:not(.no-dark) .site-main,
.post-template .site-main, html:not(.no-dark) .post-template .site-main,
.page-template .site-main { html:not(.no-dark) .page-template .site-main {
background: var(--darkmode); background: var(--darkmode);
} }
.post-full-content { html:not(.no-dark) .post-full-content {
background: var(--darkmode); background: var(--darkmode);
} }
.post-full-title { html:not(.no-dark) .post-full-title {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
.post-full-custom-excerpt { html:not(.no-dark) .post-full-custom-excerpt {
color: color-mod(var(--midgrey) l(+10%)); color: color-mod(var(--midgrey) l(+10%));
} }
.post-full-image { html:not(.no-dark) .post-full-image {
background-color: color-mod(var(--darkmode) l(+8%)); background-color: color-mod(var(--darkmode) l(+8%));
} }
.post-full-byline { html:not(.no-dark) .post-full-byline {
border-top-color: color-mod(var(--darkmode) l(+15%)); border-top-color: color-mod(var(--darkmode) l(+15%));
} }
.post-full-byline-meta h4 a { html:not(.no-dark) .post-full-byline-meta h4 a {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.post-full-byline-meta h4 a:hover { html:not(.no-dark) .post-full-byline-meta h4 a:hover {
color: #fff; color: #fff;
} }
.author-list-item .author-card { html:not(.no-dark) .author-list-item .author-card {
background: color-mod(var(--darkmode) l(+4%)); background: color-mod(var(--darkmode) l(+4%));
box-shadow: 0 12px 26px rgba(0,0,0,0.4); box-shadow: 0 12px 26px rgba(0,0,0,0.4);
} }
.author-list-item .author-card:before { html:not(.no-dark) .author-list-item .author-card:before {
border-top-color: color-mod(var(--darkmode) l(+4%)); border-top-color: color-mod(var(--darkmode) l(+4%));
} }
.no-image .author-social-link a { html:not(.no-dark) .no-image .author-social-link a {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.post-full-content h1, html:not(.no-dark) .post-full-content h1,
.post-full-content h2, html:not(.no-dark) .post-full-content h2,
.post-full-content h3, html:not(.no-dark) .post-full-content h3,
.post-full-content h4, html:not(.no-dark) .post-full-content h4,
.post-full-content h6 { html:not(.no-dark) .post-full-content h6 {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
.post-full-content a { html:not(.no-dark) .post-full-content a {
color: #fff; color: #fff;
box-shadow: inset 0 -1px 0 #fff; box-shadow: inset 0 -1px 0 #fff;
} }
.post-full-content strong { html:not(.no-dark) .post-full-content strong {
color: #fff; color: #fff;
} }
.post-full-content em { html:not(.no-dark) .post-full-content em {
color: #fff; color: #fff;
} }
.post-full-content code { html:not(.no-dark) .post-full-content code {
color: #fff; color: #fff;
background: #000; background: #000;
} }
hr { html:not(.no-dark) hr {
border-top-color: color-mod(var(--darkmode) l(+8%)); border-top-color: color-mod(var(--darkmode) l(+8%));
} }
.post-full-content hr:after { html:not(.no-dark) .post-full-content hr:after {
background: color-mod(var(--darkmode) l(+8%)); background: color-mod(var(--darkmode) l(+8%));
box-shadow: var(--darkmode) 0 0 0 5px; box-shadow: var(--darkmode) 0 0 0 5px;
} }
.post-full-content figcaption { html:not(.no-dark) .post-full-content figcaption {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
} }
.post-full-content table td:first-child { html:not(.no-dark) .post-full-content table td:first-child {
background-image: linear-gradient(to right, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%); background-image: linear-gradient(to right, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
} }
.post-full-content table td:last-child { html:not(.no-dark) .post-full-content table td:last-child {
background-image: linear-gradient(to left, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%); background-image: linear-gradient(to left, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
} }
.post-full-content table th { html:not(.no-dark) .post-full-content table th {
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
background-color: color-mod(var(--darkmode) l(+8%)); background-color: color-mod(var(--darkmode) l(+8%));
} }
.post-full-content table th, html:not(.no-dark) .post-full-content table th,
.post-full-content table td { html:not(.no-dark) .post-full-content table td {
border: color-mod(var(--darkmode) l(+8%)) 1px solid; border: color-mod(var(--darkmode) l(+8%)) 1px solid;
} }
.post-full-content .kg-bookmark-container, html:not(.no-dark) .post-full-content .kg-bookmark-container,
.post-full-content .kg-bookmark-container:hover { html:not(.no-dark) .post-full-content .kg-bookmark-container:hover {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
box-shadow: 0 0 1px rgba(255,255,255,0.9); box-shadow: 0 0 1px rgba(255,255,255,0.9);
} }
.post-full-content input { html:not(.no-dark) .post-full-content input {
color: color-mod(var(--midgrey) l(-30%)); color: color-mod(var(--midgrey) l(-30%));
} }
.kg-bookmark-title { html:not(.no-dark) .kg-bookmark-title {
color: #fff; color: #fff;
} }
.kg-bookmark-description { html:not(.no-dark) .kg-bookmark-description {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.kg-bookmark-metadata { html:not(.no-dark) .kg-bookmark-metadata {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.site-archive-header .no-image { html:not(.no-dark) .site-archive-header .no-image {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
background: var(--darkmode); background: var(--darkmode);
} }
.site-archive-header .no-image .site-header-content { html:not(.no-dark) .site-archive-header .no-image .site-header-content {
border-bottom-color: color-mod(var(--darkmode) l(+15%)); border-bottom-color: color-mod(var(--darkmode) l(+15%));
} }
.site-header-content .author-profile-image { html:not(.no-dark) .site-header-content .author-profile-image {
box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04); box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
} }
.subscribe-form { html:not(.no-dark) .subscribe-form {
border: none; border: none;
background: linear-gradient(color-mod(var(--darkmode) l(-6%)), color-mod(var(--darkmode) l(-3%))); background: linear-gradient(color-mod(var(--darkmode) l(-6%)), color-mod(var(--darkmode) l(-3%)));
} }
.subscribe-form-title { html:not(.no-dark) .subscribe-form-title {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
.subscribe-form p { html:not(.no-dark) .subscribe-form p {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
.subscribe-email { html:not(.no-dark) .subscribe-email {
border-color: color-mod(var(--darkmode) l(+6%)); border-color: color-mod(var(--darkmode) l(+6%));
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
background: color-mod(var(--darkmode) l(+3%)); background: color-mod(var(--darkmode) l(+3%));
} }
.subscribe-email:focus { html:not(.no-dark) .subscribe-email:focus {
border-color: color-mod(var(--darkmode) l(+25%)); border-color: color-mod(var(--darkmode) l(+25%));
} }
.subscribe-form button { html:not(.no-dark) .subscribe-form button {
opacity: 0.9; opacity: 0.9;
} }
.subscribe-form .invalid .message-error, html:not(.no-dark) .subscribe-form .invalid .message-error,
.subscribe-form .error .message-error { html:not(.no-dark) .subscribe-form .error .message-error {
color: color-mod(var(--red) l(+5%) s(-5%)); color: color-mod(var(--red) l(+5%) s(-5%));
} }
.subscribe-form .success .message-success { html:not(.no-dark) .subscribe-form .success .message-success {
color: color-mod(var(--green) l(+5%) s(-5%)); color: color-mod(var(--green) l(+5%) s(-5%));
} }
} }