Automatic Dark-Theme switching for GitHub pages.

style.scss

---
---

@import "{{ site.theme }}";

/**
Custom dark theme for Github Pages, by Lachee.
Put this exactly /assets/css/style.scss in your GitHub Pages root.
*/

$background: #fff;
$background-dark: #17181c;

$markdown: #f6f8fa;
$markdown-dark: #0a0a0a;
$markdown-border: #4a4a4a;

$color: #000;
$color-dark: #fefefe;

$link: #8825ff;
$link-dark: #a76bff;

/** Light Theme **/
body, .markdown-body img { 
    background: $background;
    color: $color; 
}

a { color: $link; }
video {
    background: $markdown;
    border: 1px solid $markdown-border;
    border-radius: 5px;
    padding: 1px;
}

.markdown-body .highlight pre, 
.markdown-body pre,
.markdown-body table tr,
.markdown-body code,
.markdown-body tt
{ 
    background: $markdown;
    border: 1px solid $markdown-border; 
    border-radius: 5px 
}
.markdown-body table th, .markdown-body table td {        
    border: 1px solid $markdown-border; 
}


/** Dark Theme **/
@media (prefers-color-scheme: dark) {    
    .light-only { display: none; }

    body { background: $background-dark; color: $color-dark; }
    a { color: $link-dark; }
    video { background: $markdown-dark; }
    .markdown-body .highlight pre, 
    .markdown-body pre,
    .markdown-body table tr,
    .markdown-body code,
    .markdown-body tt
    .markdown-body img
    { 
        background-color: $markdown-dark;
    }
}

/** Hide the dark-only */
@media (prefers-color-scheme: light) {
    .dark-only { display: none;}
}