Trying to make theme colors configurable in CSS with Hugo Pipes but getting a CSS Syntax Error?

support
3

Okay, I figured out a way to do this, without using Pipes.

So, I’m doing something pretty similar to what Hash_Borgir suggested here.

Instead of using the front matter params in my actual css file, I created partial called theme_settings.css and assigned my color variables within style tags there and called the partial right before my main css file. Like this:

theme_settings.css

<style>
  :root {
    --color-primary: {{ .Site.Data.theme.primary }};
    --color-secondary: {{ .Site.Data.theme.secondary }};
  }
</style>

head.html

{{ partial "theme_settings.css" . }}

{{- $styles := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js") -}}
{{- if .Site.IsServer }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
{{ else }}
    {{- $styles := $styles | minify | fingerprint | resources.PostProcess -}}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">
{{ end -}}

Then in Forestry, I just create a front matter template for my theme.yml data file so it can be edited from Forestry.

---
label: Theme Settings
hide_body: true
fields:
- type: file
  name: logo
  label: Site Logo
  description: Set the site logo
- name: primary
  type: color
  label: Primary Color
  config:
    required: false
    color_format: Hex
  description: Changes the site primary color
- name: secondary
  type: color
  label: Secondary Color
  config:
    required: false
    color_format: Hex
  description: Changes the site secondary color
pages:
- data/theme.yml

Now, I’m able to edit things like colors and logos without going into the css file. So, the people who will be managing the content for the site can make small styling edits without the need of a developer.