Hugo-theme-stack/assets/scss/variables.scss

$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
$defaultTagColors: #fff, #fff, #fff, #fff, #fff;

$on-phone: 740px;
$on-tablet: 1024px;
$on-desktop: 1519px;
$on-desktop-large: 1920px;

/*
*   CSS Variables
*/
:root {
    --body-background: #f5f5fa;
    --accent-color: #34495e;
    --accent-color-darker: #2c3e50;
    --accent-color-text: #fff;

    --card-background: #fff;
    --card-background-selected: #eaeaea;

    --card-text-color-main: #000;
    --card-text-color-secondary: #747474;
    --card-text-color-tertiary: #bababa;
    --card-separator-color: rgba(218, 218, 218, 0.5);

    --body-text-color: #bababa;

    --card-border-radius: 10px;
    --tag-border-radius: 4px;

    /**
    *   Font variables
    */
    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";

    --base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family);
    --code-font-family: Menlo, Monaco, Consolas, "Courier New";

    /**
    *   Article content font settings
    */
    --article-font-family: var(--base-font-family);
    --article-font-size: 1.7rem;
    @media (max-width: $on-tablet) {
        --article-font-size: 1.6rem;
    }
    --article-line-height: 1.85;

    /*
        Article style
    */
    --content-padding: 30px;
    --blockquote-border-size: 4px;
    --heading-border-size: 4px;

    @media (max-width: $on-desktop-large) {
        --content-padding: 25px;
    }
    
    @media (max-width: $on-tablet) {
        --content-padding: 20px;
    }

    --link-background-color: 189, 195, 199;
    --link-background-opacity: 0.5;
    --link-background-opacity-hover: 0.7;

    --section-separation: 40px;

    --small-card-padding: 25px;

    --pre-background-color: #272822;
    --pre-text-color: #f8f8f2;

    --code-background-color: rgba(0, 0, 0, 0.12);
    --code-text-color: #808080;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-background: #303030;
        --accent-color: #ecf0f1;
        --accent-color-darker: #bdc3c7;
        --accent-color-text: #000;

        --card-background: #424242;
        --card-background-selected: rgba(255, 255, 255, 0.16);
        --card-text-color-main: rgba(255, 255, 255, 0.9);
        --card-text-color-secondary: rgba(255, 255, 255, 0.7);
        --card-text-color-tertiary: rgba(255, 255, 255, 0.5);
        --card-separator-color: rgba(255, 255, 255, 0.12);

        --body-text-color: rgba(255, 255, 255, 0.7);

        --code-background-color: #272822;
        --code-text-color: rgba(255, 255, 255, 0.9);
    }
}