// dark mode preference
@media (prefers-color-scheme: dark) {
    :root {
        --background:           #{$black-dk};
        --background-accent:    #{$black-md};
        --border-accent:        #{$gray-md};
        --border-subdued:       #{$black-md};
        --link-color:           #{$blue-lt};
        --text-color:           #{$gray-lt};
        --text-color-accent:    #{$white};
        --text-color-subdued:   #{$black-lt};
        --text-title-title:     #{$purple-lt};
        --text-color-h3:        #{$teal-lt};
    }
    main aside h1 {
        background: var(--text-color-title);
        background: linear-gradient(135deg, $blue-lt 0%, $purple-lt 67%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    #toc {
        background: rgba(0,0,0,.75);
        &::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a6371' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cline x1='8' y1='6' x2='21' y2='6' /%3E%3Cline x1='8' y1='12' x2='21' y2='12' /%3E%3Cline x1='8' y1='18' x2='21' y2='18' /%3E%3Cline x1='3' y1='6' x2='3.01' y2='6' /%3E%3Cline x1='3' y1='12' x2='3.01' y2='12' /%3E%3Cline x1='3' y1='18' x2='3.01' y2='18' /%3E%3C/svg%3E%0A");
        }
    }
}