---
# System prepended metadata

title: dark mode
tags: [theme]

---

---
tags: theme
title: dark mode
description: dark mode but only when the device of the user is set to dark mode
---
<style>
:root {
    --background-dark: #222;
    --background-darker: #111;
    --primary: #ccc;
    --primary-lighter: #eee;
    --primary-darker: #888;
    --link: #77f;
    --link-visited: #a7f;
    --link-hover: #66f;
}
@media (prefers-color-scheme: dark) {
    html, body, .ui-content {
        background-color: var(--background-dark);
        color: var(--primary);
    }
    a {
        color: var(--link);
    }
    a:visited {
        color: var(--link-visited);
    }
    a:hover {
        color: var(--link-hover);
    }
    blockquote p span{
        color: var(--primary);
    }
    
    path, text {
        fill: var(--primary);
    }
    //TODO: somehow this doesn't work
    kbd {
        background-color: var(--background-darker);
        color: var(--primary);
    }
    .markdown-body table {
        display: table;
        background-color: var(--background-dark);
        color: var(--primary-lighter);
        border-color: var(--primary);
    }
    .markdown-body table th{
        background-color: var(--background-darker);
        border-color: var(--primary);
    }
    .markdown-body table td, tr{
        border-color: var(--primary-darker);
    }
    .markdown-body table tr:nth-child(2n + 1){
        background-color: var(--background-darker);
    }
    .markdown-body table tr:nth-child(2n){
        background-color: var(--background-dark);
    }
    
    .markdown-body pre {
        background-color: var(--background-darker);
        color: var(--primary-darker);
    }
    .token.operator, .token.entity,
    .token.url, .language-css .token.string,
    .style .token.string {
        background: var(--background-darker);
    }
    .ui-affix-toc, .ui-toc-dropdown, .unselectable, .hidden-print, .scrollspy-body, .affix {
        background-color: var(--background-dark);
    }
    .ui-toc-dropdown .nav>li>a {
        color: var(--primary);
    }
    
    .ui-toc-dropdown .nav>li>a:focus, 
    .ui-toc-dropdown .nav>li>a:hover {
        color: var(--primary-lighter);
        border-left: 1px solid var(--primary-lighter);
    }
    .active a{
        color: var(--primary);
        border-left: 1px solid var(--primary);
    }
    .active a:hover {
        color: var(--primary-lighter);
        border-left: 1px solid var(--primary-lighter);
    }
    .toc-menu a {
        color: var(--primary);
    }
    .toc-menu a:hover {
        color: var(--primary-lighter);
    }
    .popover, .arrow {
        background-color: var(--background-dark);
        border-color: background-color: var(--background-dark);
    }
    
    .community-button:hover {
        background-color: var(--background-darker);
    }
    
    #summary {
        background-color: var(--background-darker);
    }
    //TODO: figure out how to access the buttons
/*     .ui-open-comments, .btn, .btn-default, .open , .ui-comment-app, .small{
        background-color: var(--background-dark);
    }
    .text {
        background-color: var(--background-dark);
    }
    .open-comments div{
        background-color: var(--background-dark);
    }

    .fa {
        color: var(--primary);
    } */
}
</style>