_variables.html

<style>
    :root {
        /* Primary theme color */
        --primary-color: #FED43F;
        /* Primary theme text color */
        --primary-text-color: #543631;
        --primary-text-color-over: #000;
        /* Primary theme link color */
        --primary-link-color: #F9BB2D;
        /* Secondary color: the background body color */
        --secondary-color: #fcfaf6;
        --secondary-text-color: #303030;
        /* Highlight text color of table of content */
        --toc-highlight-text-color: #d46e13;
        --toc-background-color: white;
        --code-color: #4a4a4a;
        --code-background-color: white;

        --shadow-color: #ddd;

        /* Font used for headers (h1 & h2) */
        --header-font-family: "Fira Sans", sans-serif;
        /* Font used for text */
        --text-font-family: "Fira Sans", sans-serif;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --primary-color: #382929;
            --primary-text-color: #d7d7d7;
            --primary-text-color-over: #FFF;
            --primary-link-color: #9b9b9b;
            --secondary-color: #282828;
            --secondary-text-color: #f2f2f2;
            --toc-highlight-text-color: #f2f2f2;
            --toc-background-color: #3a3a3a;
            --code-color: white;
            --code-background-color: #4a4a4a;

            --shadow-color: #202020;
            --header-font-family: "Fira Sans", sans-serif;
            --text-font-family: "Fira Sans", sans-serif;
        }
    }
</style>