The styling system of this template is based on SCSS. All custom styles are located in the assets/scss/ directory, so you do not need to modify the original theme files.

Modify Theme Colors

Open assets/scss/custom.scss and modify the CSS variables inside :root:

:root {
    /* Light Mode */
    --accent-color: #1B365D;           /* Accent color: buttons, links, highlights */
    --accent-color-darker: #202A44;    /* Darker accent: hover states */
    --accent-color-text: #FFF;         /* Text color on top of the accent color */
    --body-background: #f8f7f2;        /* Page background */
    --card-background: #fdfdfb;        /* Card background */
    --body-text-color: #2D3748;        /* Body text color */

    &[data-scheme="dark"] {
        /* Dark Mode Overrides */
        --body-background: #101214;
        --card-background: #1c2128;
        /* ... */
    }
}

After saving, Hugo automatically recompiles and the browser refreshes instantly.

Popular Color Palette References

Purple Scheme:

--accent-color: #7C3AED;
--accent-color-darker: #6D28D9;

Green Scheme:

--accent-color: #059669;
--accent-color-darker: #047857;

Orange Scheme:

--accent-color: #EA580C;
--accent-color-darker: #C2410C;

Modify Code Block Styles

Code block related styles are in assets/scss/partials/custom-components/_code.scss.

Disable Mac-Style Title Bar

If you don’t like the macOS three-color dots, comment out the following code:

/* Comment out this before pseudo-element to disable the title bar */
/*
.article-content .highlight:before {
    ...
}
*/

Change Collapse Threshold

In _code.scss and layouts/_partials/footer/custom.html, change 600 to your desired pixel value:

/* _code.scss */
&.collapsed {
    max-height: 400px;  /* Change to your desired height */
}

/* JS in custom.html */
const MAX_HEIGHT = 400;  /* Keep consistent with CSS */

Add Custom Fonts

Add Google Fonts in assets/scss/custom.scss and set the font family:

/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

/* Apply to body */
body {
    font-family: 'Outfit', sans-serif;
}

/* Apply to article content */
.article-content {
    font-family: 'Outfit', sans-serif;
    line-height: 1.9;
}

Component Style Files Overview

Each file has a single responsibility and can be modified independently without affecting others.

Disable Homepage Grid Layout

If you prefer the traditional single-column list, edit params.toml:

[homepage]
    grid = false

Overriding Theme Layouts

If you need to modify other layout files of the theme, simply create a file with the same name in the layouts/ directory to override it:

For example, to modify the article page layout, view the original file at hugo-theme-stack-v4/layouts/single.html, then copy it to layouts/single.html in your project root and modify it.

Hugo’s override mechanism prioritizes files in the project’s root directory over the theme’s files.