How to change colours?

[JohIngs]

Hi,

now that css is shipped as a bulma module, is there a possibility to change things like button colours, for example?
I can see where the color variables are defined in your style.sass, but I dont see how I can change them. Could you please share this information in the docs? It would improve the otherwise awesome theme so much!

Thank you!

[cryptobee-it]

Hi any updates on changing colors? I am stuck at this point. Would appreciate some hints howto change the colors and height/width as the changes seem to be overwritten when touching the sass file.

[cryptobee-it]

To change colors in the hugo-fresh theme
I used to add hugo-fresh as a git submodule,

hugo new site website -f yml
cd website
git init
git submodule add https://github.com/jgthms/bulma.git themes/bulma
git submodule add https://github.com/StefMa/hugo-fresh.git themes/hugo-fresh

Then I entered the directory hugo-fresh/assets/fresh/partials
In the _colors.scss I defined my custom colors as variables.
Then I used the defined color variables in the different sass files like _hero.scss, _footer.scss etc.

[ok-kai]

@cryptobee-it Can I take a look at your config file?

I set up a new site and used the hugo.yaml config file from hugo-fresh/exampleSite, but I'm getting an error.

error:

Error: command error: failed to load modules: module "github.com/StefMa/hugo-fresh" not found in "D:\Users\K\Working\Static-Sites\Hugo_Extended\Test\website\themes\github.com\StefMa\hugo-fresh"; either add it as a Hugo Module or store it in "D:\Users\K\Working\Static-Sites\Hugo_Extended\Test\website\themes".: module does not exist

[StefMa]

@ok-kai you have to change the config to use a theme as a submodule and not a hugo module.

Basically you can remove this one

hugo-fresh/exampleSite/hugo.yaml

Lines 5 to 9 in 2e08414

	module:
	# uncomment line below for local development of module
	# workspace: hugo.work
	imports:
	path: github.com/StefMa/hugo-fresh

and instead adding

theme: 'hugo-fresh'

[ok-kai]

@StefMa

Hey author, truly appreciate your response ❤️

---

I've already removed the module part in the configuration file, but now there's a new error popping up.

The error message is as follows.

Error: command error: failed to load modules: module "github.com/jgthms/bulma" not found in "D:\Users\Keith\Working\Static-Sites\Hugo_Extended\Test\website\themes\github.com\jgthms\bulma"; either add it as a Hugo Module or store it in "D:\Users\Keith\Working\Static-Sites\Hugo_Extended\Test\website\themes".: module does not exist

---

The configuration file is as follows.

baseURL: http://something-fresh.org/
languageCode: en-us
title: Hugo Fresh Theme

theme: hugo-fresh


# module:
  # uncomment line below for local development of module
  # workspace: hugo.work
  # imports:
  #   path: github.com/StefMa/hugo-fresh

---

My file directory is as follows.

│  .gitmodules
│  hugo.toml.bak
│  hugo.yaml
│
├─archetypes
├─assets
├─content
├─data
├─i18n
├─layouts
├─static
└─themes
    ├─bulma
    │ ...Omit the directory structure of the Bulma theme.
    └─hugo-fresh
	  ...Omit the directory structure of the hugo-fresh theme.

---

[StefMa]

It seems that you have to point to the correct directoy from the hugo-fresh theme to the bulma module import.
In your website/themes/hugo-fresh/config.yml you should do:

module:
  imports:
-  - path: github.com/jgthms/bulma
+  - path: bulma
    mounts:

Does this help? 🤔

[ok-kai]

@StefMa Thanks for your reply, it's working fine now after the changes. Thanks again.