pages/sass/_theme.scss

@mixin light-theme {
    --foreground: #222222;
    --background: #eeeeee;
    --secondary: #808080;
    --tertiary: #dddddd;
    --accent: #3d3cba;
    --accent-highlight: #171746;
    --table-border: #d0d0d0;
    --table-row: #f7f7f7;
}

@mixin dark-theme {
    --foreground: #eeeeee;
    --background: #161616;
    --secondary: #999999;
    --tertiary: #444444;
    --accent: #959bf0;
    --accent-highlight: #c2c5f6;
    --table-border: var(--tertiary);
    --table-row: #1e1e1e;
}

:root {
    --code-secondary: #999999;
    --code-tertiary: #99999944;
}

:root.light-mode {
    @include light-theme;

    #dark-mode-on {
        display: inline;
    }

    #dark-mode-off {
        display: none;
    }
}

:root.dark-mode {
    @include dark-theme;

    #dark-mode-on {
        display: none;
    }

    #dark-mode-off {
        display: inline;
    }
}

.dark-mode-buttons {
    position: absolute;

    top: 1em;
    right: 1em;
}

.dark-mode-button {
    border: none;
    background-color: transparent;

    &:hover {
        cursor: pointer;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        @include light-theme;

        #dark-mode-on {
            display: inline;
        }

        #dark-mode-off {
            display: none;
        }
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        @include dark-theme;

        #dark-mode-on {
            display: none;
        }

        #dark-mode-off {
            display: inline;
        }
    }
}

body {
    color: var(--foreground);
    background-color: var(--background);
}

.secondary {
    color: var(--secondary);
}

a, a:link, a:visited {
    color: var(--accent);
}

a:hover {
    color: var(--accent-highlight);
}

blockquote {
    border-left: 2px solid var(--secondary);
}

code {
    background-color: var(--tertiary);
}

pre {
    code {
        background-color: transparent;
    }

    mark {
        color: inherit;
    }

    table tr:nth-child(even) {
        background-color: transparent;
    }

    table td:first-child {
        color: var(--code-tertiary);
    }

    &[data-name]::before {
        background-color: var(--code-tertiary);
        color: var(--code-secondary);
    }
}

.footnote-definition sup {
    color: var(--secondary);
}

.footnotes {
    border-top: 1px solid var(--table-border);
}

.footnotes-list li {
    color: var(--secondary);

    p {
        color: var(--foreground);
    }
}

hr {
    border: none;
    border-bottom: 1px solid var(--table-border);
}

table {
    th, td {
        border-color: var(--table-border);
    }

    thead, tr:nth-child(even) {
        background-color: var(--table-row);
    }
}