---
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>