gatsby-theme-try-ghost/src/styles/dark-mode.css

A Gatsby theme for building flaring fast blogs from headless Ghost CMS.

@import "global.css";

/* 12. Dark Mode
/* ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    html.casper body {
        color: rgba(255, 255, 255, 0.75);
        background: var(--darkmode);
    }

    html.casper img {
        opacity: 0.9;
    }

    html.casper .site-header-background:before {
        background: rgba(0,0,0,0.6);
    }

    html.casper .post-feed {
        background: var(--darkmode);
    }

    html.casper .post-card,
    html.casper .post-card:hover {
        border-bottom-color: color-mod(var(--darkmode) l(+8%));
    }

    html.casper .author-profile-image {
        background: var(--darkmode);
    }

    html.casper .post-card-byline-content a {
        color: rgba(255, 255, 255, 0.75);
    }

    html.casper .post-card-byline-content a:hover {
        color: #fff;
    }

    html.casper .post-card-image {
        background: var(--darkmode);
    }

    html.casper .post-card-title {
        color: rgba(255, 255, 255, 0.85);
    }

    html.casper .post-card-excerpt {
        color: color-mod(var(--midgrey) l(+10%));
    }

    html.casper .author-avatar,
    html.casper .static-avatar {
        border-color: color-mod(var(--darkgrey) l(+2%));
    }

    html.casper .site-main,
    html.casper .post-template .site-main,
    html.casper .page-template .site-main {
        background: var(--darkmode);
    }

    html.casper .post-full-content {
        background: var(--darkmode);
    }

    html.casper .post-full-title {
        color: rgba(255, 255, 255, 0.9);
    }

    html.casper .post-full-custom-excerpt {
        color: color-mod(var(--midgrey) l(+10%));
    }

    html.casper .post-full-image {
        background-color: color-mod(var(--darkmode) l(+8%));
    }

    html.casper .post-full-byline {
        border-top-color: color-mod(var(--darkmode) l(+15%));
    }

    html.casper .post-full-byline-meta h4 a {
        color: rgba(255, 255, 255, 0.75);
    }

    html.casper .post-full-byline-meta h4 a:hover {
        color: #fff;
    }

    html.casper .author-list-item .author-card {
        background: color-mod(var(--darkmode) l(+4%));
        box-shadow: 0 12px 26px rgba(0,0,0,0.4);
    }

    html.casper .author-list-item .author-card:before {
        border-top-color: color-mod(var(--darkmode) l(+4%));
    }

    html.casper .no-image .author-social-link a {
        color: rgba(255, 255, 255, 0.75);
    }

    html.casper .post-full-content h1,
    html.casper .post-full-content h2,
    html.casper .post-full-content h3,
    html.casper .post-full-content h4,
    html.casper .post-full-content h6 {
        color: rgba(255, 255, 255, 0.9);
    }

    html.casper .post-full-content a {
        color: #fff;
        box-shadow: inset 0 -1px 0 #fff;
    }

    html.casper .post-full-content strong {
        color: #fff;
    }

    html.casper .post-full-content em {
        color: #fff;
    }

    html.casper .post-full-content code {
        color: #fff;
        background: #000;
    }

    html.casper hr {
        border-top-color: color-mod(var(--darkmode) l(+8%));
    }

    html.casper .post-full-content hr:after {
        background: color-mod(var(--darkmode) l(+8%));
        box-shadow: var(--darkmode) 0 0 0 5px;
    }

    html.casper .post-full-content figcaption {
        color: rgba(255, 255, 255, 0.6);
    }

    html.casper .post-full-content table td:first-child {
        background-image: linear-gradient(to right, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
    }

    html.casper .post-full-content table td:last-child {
        background-image: linear-gradient(to left, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
    }

    html.casper .post-full-content table th {
        color: rgba(255, 255, 255, 0.85);
        background-color: color-mod(var(--darkmode) l(+8%));
    }

    html.casper .post-full-content table th,
    html.casper .post-full-content table td {
        border: color-mod(var(--darkmode) l(+8%)) 1px solid;
    }

    html.casper .post-full-content .kg-bookmark-container,
    html.casper .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.casper .post-full-content input {
        color: color-mod(var(--midgrey) l(-30%));
    }

    html.casper .kg-bookmark-title {
        color: #fff;
    }

    html.casper .kg-bookmark-description {
        color: rgba(255, 255, 255, 0.75);
    }

    html.casper .kg-bookmark-metadata {
        color: rgba(255, 255, 255, 0.75);
    }

    html.casper .site-archive-header .no-image {
        color: rgba(255, 255, 255, 0.9);
        background: var(--darkmode);
    }

    html.casper .site-archive-header .no-image .site-header-content {
        border-bottom-color: color-mod(var(--darkmode) l(+15%));
    }

    html.casper .site-header-content .author-profile-image {
        box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
    }

    html.casper .subscribe-form {
        border: none;
        background: linear-gradient(color-mod(var(--darkmode) l(-6%)), color-mod(var(--darkmode) l(-3%)));
    }

    html.casper .subscribe-form-title {
        color: rgba(255, 255, 255, 0.9);
    }

    html.casper .subscribe-form p {
        color: rgba(255, 255, 255, 0.7);
    }

    html.casper .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.casper .subscribe-email:focus {
        border-color: color-mod(var(--darkmode) l(+25%));
    }

    html.casper .subscribe-form button {
        opacity: 0.9;
    }

    html.casper .subscribe-form .invalid .message-error,
    html.casper .subscribe-form .error .message-error {
        color: color-mod(var(--red) l(+5%) s(-5%));
    }

    html.casper .subscribe-form .success .message-success {
        color: color-mod(var(--green) l(+5%) s(-5%));
    }

    html.casper code[class*='language-'],
    html.casper pre[class*='language-'] {
        background: none;
    }
}