How to change the primary colour on the site

[fhuadeen]

Hi

Thank you for this theme. It looks very simple and elegant.

However, I am trying to change the primary colour but don't know how to do that. I apologise if this is also due to my inexperience with Hugo.

Thank you very much.

[stecullum]

Ok I think i figured it out..

TL;DR
Modify hugo.yaml and add

params:
  colors:
    primary: "#0F7474"

To the bottom of the file

More Info ( may not be 100% correct .. im no expert just inferring )

The theme is pulled in from the file hugo.yaml in the demo branch. At the top of the file you will see theme: "github.com/writeonlycode/hugo-agency-web" which pulls in the main branch code.

Inside the @main branch code you will see a styles.css file

The file looks like

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@import './shared/_fontawesome-free.css';
@import './shared/_pagination.css';
@import './shared/_miscellaneous.css';

@layer base {
  html {
    font-family: 'Poppins', system-ui, sans-serif;
  }
}

@theme {
  --color-primary: {{ (default "#0077B6" site.Params.colors.primary) }};
}

body {
  @apply antialiased;
}

You override site.Params.colors.primary and if you add other fields just follow the same pattern

@theme {
  --color-primary: {{ (default "#0077B6" site.Params.colors.primary) }};
}

Modify hugo.yaml in your demo branch adding the override for site.Params.colors.primary to the bottom

params:
  colors:
    primary: "#0F7474"

Hope that helps

[fhuadeen]

Thank you very much @stecullum. This worked perfectly for me.

[Eliot-Layer8]

Adding to thIs..

Is there anyway to change the colour of the teal semicircle half way down the page?

In addtion;

Anyway to remove the dotted line that goes through the features.yaml sections?