Customize theme colours
Opened this issue · 2 comments
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
scss
directory?
Modifying the file within the theme's directory doesn't look like a future proof method.
Kr
TGZ
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'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;
}