@media (prefers-color-scheme: dark){

html {
    background: invert($bg-color);
    color: invert($fg-color);

    body {
        background: invert($bg-color);
        color: invert($fg-color);

        header {
            border-bottom: $border-thickness solid invert($fg-color);
        }

        footer {
            border-top: $border-thickness solid invert($fg-color);
        }

        a {
            color: invert($link-color);
        }

        a:hover {
            color: invert($link-hover-color);
        }

        a:active {
            color: invert($link-active-color);
        }

        a:visited {
            color: invert($link-visited-color);
        }

        blockquote {
            border-left: $border-thickness solid invert($fg-color);
        }

        figure {
            border: $border-thickness solid invert($fg-color);
        }

        hr {
            border: $hr-border-thickness solid invert($fg-color);
        }

        article {
            footer {
                border-top: $hr-border-thickness dashed invert($fg-color);
            }
        }

        table {
            border: $border-thickness solid invert($fg-color);
            th, td {
                border: $border-thickness solid invert($fg-color);
            }
        }

        nav {
            p {
                a {
                    border: $border-thickness solid invert($link-color);
                }

                a:hover {
                    border: $border-thickness solid invert($link-hover-color);
                }

                a:active {
                    border: $border-thickness solid invert($link-active-color);
                }

                a:visited {
                    border: $border-thickness solid invert($link-visited-color);
                }
            }
        }
    }
}

}