Question: changing icon color(s) or font

[jamesbraza]

Is there a config parameter for changing icon colors and/or font?

I was looking at the config exampleSite/config/_default/hugo.toml, and I didn't see any fields for specifying overrides on these.

[wjh18]

This is something I'm working on documenting better.

You can override any of the CSS custom properties in an /assets/custom.css file or whatever file you set custom_css to in params.toml.

If you want to change your whole theme's primary color in one go, set a --color-primary property to your chosen color.

Global property override:

/* Light AND dark theme override */
:root, [data-theme="dark"] {
    --color-primary: green;
}
/* Separate overrides for light and dark */
:root {
    --color-primary: green;
}
[data-theme="dark"] {
    --color-primary: red;
}

For individual elements that don't have a property, find their class in the source code or browser and override that.

Those buttons in the image, for example, have classes .btn-primary and .btn-secondary and are children of .hero-info.

.hero-info .btn-primary {
    background-color: green;
    border-color: green;
}

.hero-info .btn-secondary {
    color: green;
    border-color: green;
}

Because CSS is ubiquitous, I felt it was easier just using CSS for these types of changes rather than trying to support a million different style preferences via configs.

Something you just made me realize is that in development the custom CSS file was linked before the compiled source Sass, and therefore the cascade wasn't picking up some custom CSS changes. I just fixed that in the version I released a minute ago (v3.3.0). This only impacted custom CSS in development because in prod the custom CSS was bundled with the source CSS in the correct order.

Icons use --color-primary for their fill property (CSS color won't change SVG color unfortunately so you'll have to override the SVG layout templates if you want them to differ from your --color-primary property).

As for fonts, I didn't expose those as CSS properties yet, just the font sizes. This is because the theme uses local fonts and doesn't load them from a CDN which makes the process a little more difficult. You can however customize fonts by adding the files to <your_site>/static/fonts/<font_name>/* for example, then creating @font-face declarations for them (see themes/hugo-liftoff/assets/scss/base/_fonts.scss to see how it's done for the default font.

Single font-face declaration, in practice you'd have 1 for each font style:

@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Thin'),
      url('/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

Then in your custom.css, add an override for the body font:

body {
    font: normal 125%/1.4 "Montserrat", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

Apologies for the long-winded answer. I'm going to work on documenting this better and improving some of these customization workflows.

[jamesbraza]

Okay thank you, I appreciate the detailed answer! I agree with your thoughts on allowing user to extend colors directly via CSS. Sounds good on changing fonts.

Feel free to close this out whenever you're ready

[wjh18]

My pleasure; it's helpful getting feedback like this