Customize theme colours

[TheGroundZero]

Hi all

I was wondering what the most efficient / Hugo-like way of changing the theme's colours were.
Preferably something that will survive future git pulls.

I know the colours are defined at <hugo_base>/themes/hermit/assets/scss/_predefined.scss.

• Are there config params I can set?
• Do I copy this file to <hugo_base>/ assets/scss/_predefined.scss?
• Do I copy the whole scssdirectory?

Modifying the file within the theme's directory doesn't look like a future proof method.

Kr
TGZ

[LegionSports]

I'm also wondering about this.

I've added a background image to the home page, however, the color is extremely washed out. I've set $light-grey to transparent and still cannot see my background image well.

Any ideas?

[TheGroundZero]

@LegionSports

I'm also wondering about this.

I've added a background image to the home page, however, the color is extremely washed out. I've set $light-grey to transparent and still cannot see my background image well.

Any ideas?

I don't think that's related to my question.

The bg-img is loaded as the background image of a div which is positioned behind the content.
It also has an opacity of 3%, which makes it almost transparent. A 100% opacity would make the image completely visible, making text (almost) unreadable.

See /layouts/posts/single.html

{{ define "main" }}
    {{- if (or .Params.images .Params.featuredImg) }}
    <div class="bg-img"></div>
    {{- end }}

and /assets/scss/style.scss

.bg-img {
  width: 100vw;
  height: 100vh;
  opacity: .03;
  z-index: -1;
  position: fixed;
  top: 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: opacity .5s;
}