Hugo Pipes for SCSS conversion and configurable colors

support
1

In my theme Hallo I offer configuration options for the colors of the site, so that the user can set colors using config.toml. I use the following code to get the colors into SCSS:

$color-background: {{ .Site.Params.colors.background | default "#6fcdbd" }};
$color-foreground: {{ .Site.Params.colors.foreground | default "#fff" }};
$color-hover: {{ .Site.Params.colors.hover | default "#333" }};

This does not work with Hugo Basic whenever the user sets custom colors. This makes sense: the SCSS needs to be transpiled to CSS again because of the changed colors, which Hugo Basic cannot do.

A possible solution I see is to use CSS variables in a separate CSS file. A disadvantage of this is that two CSS files need to be loaded: one where the variables are defined, and another one for the transpiled SCSS. It also makes my theme unusable for people who want to support older browsers.

Does anyone have any other ideas?

2

Two ideas:

(1) Instead of letting users specify any color they want, restrict them to a small list. Then have these colors already defined in your SCSS.

(2) Use plain old CSS.

1 Like
3

Third Idea: use “root variables” that you put in the template before you load the css file.

quick sample:

:root {
  --main-bg-color: {{ .Site.Params.colors.background | default "#6fcdbd" }};
}

later on in the .css file

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}
1 Like
4

Thanks a lot for your suggestions! I’m afraid I’ll have to go back to plain old CSS, since I don’t want to restrict the users in which colors they choose, and would like them to be able to support older browsers if they want to.

It’s a pity there are some rough edges around Hugo Pipes, SCSS transpiling and the distinction between Hugo Basic and Extended. Don’t get me wrong, at the moment I also don’t have a solution, given that the distinction is here to stay. :slight_smile: I’ll see if I can come up with ways to make maintaining themes, that use these functionalities, a bit easier.

Thanks again for your suggestions!

5

Am curious. What is stopping your users from installing the Extended version of Hugo?

6

I think Netlify is. I made this topic based on this issue on Github.

7

A way around this would be for your users to install the Hugo Extended version locally, do their color changes, then commit their resources folder, which includes a cache of all the SCSS stuff.

See this Hugo Themes README section for more info https://github.com/gohugoio/hugoThemes#resources

1 Like
8

That’s also a very good solution! I’m going to include this in the readme of the theme for now, so that the person who opened the issue can finish their site, while I think about whether I want to alter the theme for this single case.

This is one of the things I love about Hugo: there are usually multiple solutions to a problem!

Thanks a lot for your help! :slight_smile: