vividboarder
/
Vivid-Casper
mirror of https://github.com/ViViDboarder/Vivid-Casper.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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 2021-02-25 21:58:09 +08:00
parent 1ea3ad649b
commit f9d9b1fab5
3 changed files with 64 additions and 64 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

124
assets/css/screen.css
View File

@ -2861,229 +2861,229 @@ Usage (In Ghost editor):
/* 12. Dark Mode
/* ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
html:not(.no-dark) body {
html.dark-mode body {
color: rgba(255, 255, 255, 0.75);
background: var(--darkmode);
}
html:not(.no-dark) img {
html.dark-mode img {
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);
}
html:not(.no-dark) .post-feed {
html.dark-mode .post-feed {
background: var(--darkmode);
}
html:not(.no-dark) .post-card,
html:not(.no-dark) .post-card:hover {
html.dark-mode .post-card,
html.dark-mode .post-card:hover {
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);
}
html:not(.no-dark) .post-card-byline-content a {
html.dark-mode .post-card-byline-content a {
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;
}
html:not(.no-dark) .post-card-image {
html.dark-mode .post-card-image {
background: var(--darkmode);
}
html:not(.no-dark) .post-card-title {
html.dark-mode .post-card-title {
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%));
}
html:not(.no-dark) .author-avatar,
html:not(.no-dark) .static-avatar {
html.dark-mode .author-avatar,
html.dark-mode .static-avatar {
border-color: color-mod(var(--darkgrey) l(+2%));
}
html:not(.no-dark) .site-main,
html:not(.no-dark) .post-template .site-main,
html:not(.no-dark) .page-template .site-main {
html.dark-mode .site-main,
html.dark-mode .post-template .site-main,
html.dark-mode .page-template .site-main {
background: var(--darkmode);
}
html:not(.no-dark) .post-full-content {
html.dark-mode .post-full-content {
background: var(--darkmode);
}
html:not(.no-dark) .post-full-title {
html.dark-mode .post-full-title {
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%));
}
html:not(.no-dark) .post-full-image {
html.dark-mode .post-full-image {
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%));
}
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);
}
html:not(.no-dark) .post-full-byline-meta h4 a:hover {
html.dark-mode .post-full-byline-meta h4 a:hover {
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%));
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%));
}
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);
}
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 {
html.dark-mode .post-full-content h1,
html.dark-mode .post-full-content h2,
html.dark-mode .post-full-content h3,
html.dark-mode .post-full-content h4,
html.dark-mode .post-full-content h6 {
color: rgba(255, 255, 255, 0.9);
}
html:not(.no-dark) .post-full-content a {
html.dark-mode .post-full-content a {
color: #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;
}
html:not(.no-dark) .post-full-content em {
html.dark-mode .post-full-content em {
color: #fff;
}
html:not(.no-dark) .post-full-content code {
html.dark-mode .post-full-content code {
color: #fff;
background: #000;
}
html:not(.no-dark) hr {
html.dark-mode hr {
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%));
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);
}
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%);
}
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%);
}
html:not(.no-dark) .post-full-content table th {
html.dark-mode .post-full-content table th {
color: rgba(255, 255, 255, 0.85);
background-color: color-mod(var(--darkmode) l(+8%));
}
html:not(.no-dark) .post-full-content table th,
html:not(.no-dark) .post-full-content table td {
html.dark-mode .post-full-content table th,
html.dark-mode .post-full-content table td {
border: color-mod(var(--darkmode) l(+8%)) 1px solid;
}
html:not(.no-dark) .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,
html.dark-mode .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);
}
html:not(.no-dark) .post-full-content input {
html.dark-mode .post-full-content input {
color: color-mod(var(--midgrey) l(-30%));
}
html:not(.no-dark) .kg-bookmark-title {
html.dark-mode .kg-bookmark-title {
color: #fff;
}
html:not(.no-dark) .kg-bookmark-description {
html.dark-mode .kg-bookmark-description {
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);
}
html:not(.no-dark) .site-archive-header .no-image {
html.dark-mode .site-archive-header .no-image {
color: rgba(255, 255, 255, 0.9);
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%));
}
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);
}
html:not(.no-dark) .subscribe-form {
html.dark-mode .subscribe-form {
border: none;
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);
}
html:not(.no-dark) .subscribe-form p {
html.dark-mode .subscribe-form p {
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%));
color: rgba(255, 255, 255, 0.9);
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%));
}
html:not(.no-dark) .subscribe-form button {
html.dark-mode .subscribe-form button {
opacity: 0.9;
}
html:not(.no-dark) .subscribe-form .invalid .message-error,
html:not(.no-dark) .subscribe-form .error .message-error {
html.dark-mode .subscribe-form .invalid .message-error,
html.dark-mode .subscribe-form .error .message-error {
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%));
}
}