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
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
|
|
@ -2890,229 +2890,229 @@ Usage (In Ghost editor):
|
|||
/* 12. Dark Mode
|
||||
/* ---------------------------------------------------------- */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
html:not(.no-dark) body {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
background: var(--darkmode);
|
||||
}
|
||||
|
||||
img {
|
||||
html:not(.no-dark) img {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.site-header-background:before {
|
||||
html:not(.no-dark) .site-header-background:before {
|
||||
background: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.post-feed {
|
||||
html:not(.no-dark) .post-feed {
|
||||
background: var(--darkmode);
|
||||
}
|
||||
|
||||
.post-card,
|
||||
.post-card:hover {
|
||||
html:not(.no-dark) .post-card,
|
||||
html:not(.no-dark) .post-card:hover {
|
||||
border-bottom-color: color-mod(var(--darkmode) l(+8%));
|
||||
}
|
||||
|
||||
.author-profile-image {
|
||||
html:not(.no-dark) .author-profile-image {
|
||||
background: var(--darkmode);
|
||||
}
|
||||
|
||||
.post-card-byline-content a {
|
||||
html:not(.no-dark) .post-card-byline-content a {
|
||||
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;
|
||||
}
|
||||
|
||||
.post-card-image {
|
||||
html:not(.no-dark) .post-card-image {
|
||||
background: var(--darkmode);
|
||||
}
|
||||
|
||||
.post-card-title {
|
||||
html:not(.no-dark) .post-card-title {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.post-card-excerpt {
|
||||
html:not(.no-dark) .post-card-excerpt {
|
||||
color: color-mod(var(--midgrey) l(+10%));
|
||||
}
|
||||
|
||||
.author-avatar,
|
||||
.static-avatar {
|
||||
html:not(.no-dark) .author-avatar,
|
||||
html:not(.no-dark) .static-avatar {
|
||||
border-color: color-mod(var(--darkgrey) l(+2%));
|
||||
}
|
||||
|
||||
.site-main,
|
||||
.post-template .site-main,
|
||||
.page-template .site-main {
|
||||
html:not(.no-dark) .site-main,
|
||||
html:not(.no-dark) .post-template .site-main,
|
||||
html:not(.no-dark) .page-template .site-main {
|
||||
background: var(--darkmode);
|
||||
}
|
||||
|
||||
.post-full-content {
|
||||
html:not(.no-dark) .post-full-content {
|
||||
background: var(--darkmode);
|
||||
}
|
||||
|
||||
.post-full-title {
|
||||
html:not(.no-dark) .post-full-title {
|
||||
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%));
|
||||
}
|
||||
|
||||
.post-full-image {
|
||||
html:not(.no-dark) .post-full-image {
|
||||
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%));
|
||||
}
|
||||
|
||||
.post-full-byline-meta h4 a {
|
||||
html:not(.no-dark) .post-full-byline-meta h4 a {
|
||||
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;
|
||||
}
|
||||
|
||||
.author-list-item .author-card {
|
||||
html:not(.no-dark) .author-list-item .author-card {
|
||||
background: color-mod(var(--darkmode) l(+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%));
|
||||
}
|
||||
|
||||
.no-image .author-social-link a {
|
||||
html:not(.no-dark) .no-image .author-social-link a {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.post-full-content h1,
|
||||
.post-full-content h2,
|
||||
.post-full-content h3,
|
||||
.post-full-content h4,
|
||||
.post-full-content h6 {
|
||||
html:not(.no-dark) .post-full-content h1,
|
||||
html:not(.no-dark) .post-full-content h2,
|
||||
html:not(.no-dark) .post-full-content h3,
|
||||
html:not(.no-dark) .post-full-content h4,
|
||||
html:not(.no-dark) .post-full-content h6 {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.post-full-content a {
|
||||
html:not(.no-dark) .post-full-content a {
|
||||
color: #fff;
|
||||
box-shadow: inset 0 -1px 0 #fff;
|
||||
}
|
||||
|
||||
.post-full-content strong {
|
||||
html:not(.no-dark) .post-full-content strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.post-full-content em {
|
||||
html:not(.no-dark) .post-full-content em {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.post-full-content code {
|
||||
html:not(.no-dark) .post-full-content code {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
hr {
|
||||
html:not(.no-dark) hr {
|
||||
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%));
|
||||
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);
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
|
||||
.post-full-content table th {
|
||||
html:not(.no-dark) .post-full-content table th {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
background-color: color-mod(var(--darkmode) l(+8%));
|
||||
}
|
||||
|
||||
.post-full-content table th,
|
||||
.post-full-content table td {
|
||||
html:not(.no-dark) .post-full-content table th,
|
||||
html:not(.no-dark) .post-full-content table td {
|
||||
border: color-mod(var(--darkmode) l(+8%)) 1px solid;
|
||||
}
|
||||
|
||||
.post-full-content .kg-bookmark-container,
|
||||
.post-full-content .kg-bookmark-container:hover {
|
||||
html:not(.no-dark) .post-full-content .kg-bookmark-container,
|
||||
html:not(.no-dark) .post-full-content .kg-bookmark-container:hover {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
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%));
|
||||
}
|
||||
|
||||
.kg-bookmark-title {
|
||||
html:not(.no-dark) .kg-bookmark-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.kg-bookmark-description {
|
||||
html:not(.no-dark) .kg-bookmark-description {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.kg-bookmark-metadata {
|
||||
html:not(.no-dark) .kg-bookmark-metadata {
|
||||
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);
|
||||
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%));
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.subscribe-form {
|
||||
html:not(.no-dark) .subscribe-form {
|
||||
border: none;
|
||||
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);
|
||||
}
|
||||
|
||||
.subscribe-form p {
|
||||
html:not(.no-dark) .subscribe-form p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.subscribe-email {
|
||||
html:not(.no-dark) .subscribe-email {
|
||||
border-color: color-mod(var(--darkmode) l(+6%));
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
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%));
|
||||
}
|
||||
|
||||
.subscribe-form button {
|
||||
html:not(.no-dark) .subscribe-form button {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.subscribe-form .invalid .message-error,
|
||||
.subscribe-form .error .message-error {
|
||||
html:not(.no-dark) .subscribe-form .invalid .message-error,
|
||||
html:not(.no-dark) .subscribe-form .error .message-error {
|
||||
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%));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue