@media (prefers-color-scheme: dark) {
    :root {
        --theme-color: #3498db;
        --theme-color: #ff333d;
    }

    :target {
        scroll-margin-top: 2em;
    }

    html, body {
        background: #0b0c0f;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 15px;
        color: #CCC;
    }

    .sidebar-toggle,
    .sidebar {
        background-color: #0a1d3a;
        color: #FFF;
    }

    .markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong {
        color: #DDDDEE;
    }

    .anchor, .anchor span {
        color: #DDDDEE;
    }

    .sidebar ul li a {
        color: #DDD;
    }

    .markdown-section p.warn {
        background: #7b437061;
    }

    .markdown-section tr:nth-child(2n) {
        background-color: #80808030;
    }

    .markdown-section pre, .markdown-section code {
        background-color: #0a1d3a;
    }

    .markdown-section pre>code {
        color: #CCC;
    }

    .content a:not(.anchor),
    .markdown-section a:not(.anchor) {
        color: #65a2cb /*#3498db*/;
        text-decoration: none;
    }

    .content a:not(.anchor):hover,
    .markdown-section a:not(.anchor):hover {
        color: #80b6db /*#59afe8*/;
        text-decoration: underline;
    }

    .content a:not(.anchor):visited,
    .markdown-section a:not(.anchor):visited {
        /*color: /*#a563bf*/;
        text-decoration: none;
    }

    .content a:not(.anchor):visited:hover,
    .markdown-section a:not(.anchor):visited:hover  {
        /*color: /*#b77fcd*/;
        text-decoration: underline;
    }

    thead {
        font-weight:bold;
    }

    .monospace {
        font-family:Courier New, Courier, monospace;
    }
    
    .markdown-section p.tip {
        background:#333;
    }

    .markdown-section hr {
        margin: 1em 0;
        opacity: 0.3;
    }

    .markdown-section td {
        border: 1px solid #d0d0d030;
    }

    .prop-description {
        margin-left:1em;
    }
}