Disable dark mode by default
Dark mode is disabled by default, but can be enabled by adding a class dark-mode to html element.
This commit is contained in:
Sodbileg Gansukh
parent
1ea3ad649b
commit
f9d9b1fab5
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
|
|
@ -2861,229 +2861,229 @@ Usage (In Ghost editor):
|
||||||
/* 12. Dark Mode
|
/* 12. Dark Mode
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html:not(.no-dark) body {
|
html.dark-mode body {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
background: var(--darkmode);
|
background: var(--darkmode);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) img {
|
html.dark-mode img {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .site-header-background:before {
|
html.dark-mode .site-header-background:before {
|
||||||
background: rgba(0,0,0,0.6);
|
background: rgba(0,0,0,0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-feed {
|
html.dark-mode .post-feed {
|
||||||
background: var(--darkmode);
|
background: var(--darkmode);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-card,
|
html.dark-mode .post-card,
|
||||||
html:not(.no-dark) .post-card:hover {
|
html.dark-mode .post-card:hover {
|
||||||
border-bottom-color: color-mod(var(--darkmode) l(+8%));
|
border-bottom-color: color-mod(var(--darkmode) l(+8%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .author-profile-image {
|
html.dark-mode .author-profile-image {
|
||||||
background: var(--darkmode);
|
background: var(--darkmode);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-card-byline-content a {
|
html.dark-mode .post-card-byline-content a {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-card-byline-content a:hover {
|
html.dark-mode .post-card-byline-content a:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-card-image {
|
html.dark-mode .post-card-image {
|
||||||
background: var(--darkmode);
|
background: var(--darkmode);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-card-title {
|
html.dark-mode .post-card-title {
|
||||||
color: rgba(255, 255, 255, 0.85);
|
color: rgba(255, 255, 255, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-card-excerpt {
|
html.dark-mode .post-card-excerpt {
|
||||||
color: color-mod(var(--midgrey) l(+10%));
|
color: color-mod(var(--midgrey) l(+10%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .author-avatar,
|
html.dark-mode .author-avatar,
|
||||||
html:not(.no-dark) .static-avatar {
|
html.dark-mode .static-avatar {
|
||||||
border-color: color-mod(var(--darkgrey) l(+2%));
|
border-color: color-mod(var(--darkgrey) l(+2%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .site-main,
|
html.dark-mode .site-main,
|
||||||
html:not(.no-dark) .post-template .site-main,
|
html.dark-mode .post-template .site-main,
|
||||||
html:not(.no-dark) .page-template .site-main {
|
html.dark-mode .page-template .site-main {
|
||||||
background: var(--darkmode);
|
background: var(--darkmode);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content {
|
html.dark-mode .post-full-content {
|
||||||
background: var(--darkmode);
|
background: var(--darkmode);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-title {
|
html.dark-mode .post-full-title {
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-custom-excerpt {
|
html.dark-mode .post-full-custom-excerpt {
|
||||||
color: color-mod(var(--midgrey) l(+10%));
|
color: color-mod(var(--midgrey) l(+10%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-image {
|
html.dark-mode .post-full-image {
|
||||||
background-color: color-mod(var(--darkmode) l(+8%));
|
background-color: color-mod(var(--darkmode) l(+8%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-byline {
|
html.dark-mode .post-full-byline {
|
||||||
border-top-color: color-mod(var(--darkmode) l(+15%));
|
border-top-color: color-mod(var(--darkmode) l(+15%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-byline-meta h4 a {
|
html.dark-mode .post-full-byline-meta h4 a {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-byline-meta h4 a:hover {
|
html.dark-mode .post-full-byline-meta h4 a:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .author-list-item .author-card {
|
html.dark-mode .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);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .author-list-item .author-card:before {
|
html.dark-mode .author-list-item .author-card:before {
|
||||||
border-top-color: color-mod(var(--darkmode) l(+4%));
|
border-top-color: color-mod(var(--darkmode) l(+4%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .no-image .author-social-link a {
|
html.dark-mode .no-image .author-social-link a {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content h1,
|
html.dark-mode .post-full-content h1,
|
||||||
html:not(.no-dark) .post-full-content h2,
|
html.dark-mode .post-full-content h2,
|
||||||
html:not(.no-dark) .post-full-content h3,
|
html.dark-mode .post-full-content h3,
|
||||||
html:not(.no-dark) .post-full-content h4,
|
html.dark-mode .post-full-content h4,
|
||||||
html:not(.no-dark) .post-full-content h6 {
|
html.dark-mode .post-full-content h6 {
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content a {
|
html.dark-mode .post-full-content a {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
box-shadow: inset 0 -1px 0 #fff;
|
box-shadow: inset 0 -1px 0 #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content strong {
|
html.dark-mode .post-full-content strong {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content em {
|
html.dark-mode .post-full-content em {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content code {
|
html.dark-mode .post-full-content code {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #000;
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) hr {
|
html.dark-mode hr {
|
||||||
border-top-color: color-mod(var(--darkmode) l(+8%));
|
border-top-color: color-mod(var(--darkmode) l(+8%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content hr:after {
|
html.dark-mode .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;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content figcaption {
|
html.dark-mode .post-full-content figcaption {
|
||||||
color: rgba(255, 255, 255, 0.6);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content table td:first-child {
|
html.dark-mode .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%);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content table td:last-child {
|
html.dark-mode .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%);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content table th {
|
html.dark-mode .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%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content table th,
|
html.dark-mode .post-full-content table th,
|
||||||
html:not(.no-dark) .post-full-content table td {
|
html.dark-mode .post-full-content table td {
|
||||||
border: color-mod(var(--darkmode) l(+8%)) 1px solid;
|
border: color-mod(var(--darkmode) l(+8%)) 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content .kg-bookmark-container,
|
html.dark-mode .post-full-content .kg-bookmark-container,
|
||||||
html:not(.no-dark) .post-full-content .kg-bookmark-container:hover {
|
html.dark-mode .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);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .post-full-content input {
|
html.dark-mode .post-full-content input {
|
||||||
color: color-mod(var(--midgrey) l(-30%));
|
color: color-mod(var(--midgrey) l(-30%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .kg-bookmark-title {
|
html.dark-mode .kg-bookmark-title {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .kg-bookmark-description {
|
html.dark-mode .kg-bookmark-description {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .kg-bookmark-metadata {
|
html.dark-mode .kg-bookmark-metadata {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .site-archive-header .no-image {
|
html.dark-mode .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);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .site-archive-header .no-image .site-header-content {
|
html.dark-mode .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%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .site-header-content .author-profile-image {
|
html.dark-mode .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);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .subscribe-form {
|
html.dark-mode .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%)));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .subscribe-form-title {
|
html.dark-mode .subscribe-form-title {
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .subscribe-form p {
|
html.dark-mode .subscribe-form p {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .subscribe-email {
|
html.dark-mode .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%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .subscribe-email:focus {
|
html.dark-mode .subscribe-email:focus {
|
||||||
border-color: color-mod(var(--darkmode) l(+25%));
|
border-color: color-mod(var(--darkmode) l(+25%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .subscribe-form button {
|
html.dark-mode .subscribe-form button {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .subscribe-form .invalid .message-error,
|
html.dark-mode .subscribe-form .invalid .message-error,
|
||||||
html:not(.no-dark) .subscribe-form .error .message-error {
|
html.dark-mode .subscribe-form .error .message-error {
|
||||||
color: color-mod(var(--red) l(+5%) s(-5%));
|
color: color-mod(var(--red) l(+5%) s(-5%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(.no-dark) .subscribe-form .success .message-success {
|
html.dark-mode .subscribe-form .success .message-success {
|
||||||
color: color-mod(var(--green) l(+5%) s(-5%));
|
color: color-mod(var(--green) l(+5%) s(-5%));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue