How to change certain colors (e.g. hyperlinks) in the theme?

[kimlaberinto]

I'm interested in changing the teal color used in the theme. I think it's used for the hyperlinks. I thought I could change the color in the following file, but it didn't work when I tried it.

I found this file: assets/css/base.css

:root {
    @apply font-serif bg-primary-bg text-primary-text;
    --color-eureka: #38B2AC;
    --color-primary-bg: rgba(242,242,247,1.00);
    --color-secondary-bg: rgba(255,255,255,1.00);
    --color-tertiary-bg: rgba(242,242,247,1.00);
    --color-primary-text: rgba(0,0,0,0.85);
    --color-secondary-text: rgba(0,0,0,0.7);
    --color-tertiary-text: rgba(0,0,0,0.55);
}

.dark {
    --color-eureka: #38B2AC;
    --color-primary-bg: rgba(0,0,0,1.00);
    --color-secondary-bg: rgba(28,28,30,1.00);
    --color-tertiary-bg: rgba(44,44,46,1.00);
    --color-primary-text: rgba(255,255,255,0.85);
    --color-secondary-text: rgba(255,255,255,0.7);
    --color-tertiary-text: rgba(255,255,255,0.55);
}

a:hover {
    @apply text-eureka transition duration-300 ease-in-out;
}

But when I change --color-eureka and retest my site using Hugo (hugo serve) I don't see any changes. Am I doing something wrong?

Where can I change the color?

[wangchucheng]

Regenerating the assets may solve this problem. You can comment the build config in config.yaml and install necessary packages in theme folder (npm install, etc.). Hugo pipes related docs in gohugo.io may help you.

…

________________________________ 发件人: Kim Laberinto <[email protected]> 发送时间: Wednesday, February 10, 2021 7:59:31 AM 收件人: wangchucheng/hugo-eureka <[email protected]> 抄送: Subscribed <[email protected]> 主题: [wangchucheng/hugo-eureka] How to change certain colors (e.g. hyperlinks) in the theme? (#64) I'm interested in changing the teal color used in the theme. I think it's used for the hyperlinks. I thought I could change the color in the following file, but it didn't work when I tried it. I found this file: assets/css/base.css :root { @apply font-serif bg-primary-bg text-primary-text; --color-eureka: #38B2AC; --color-primary-bg: rgba(242,242,247,1.00); --color-secondary-bg: rgba(255,255,255,1.00); --color-tertiary-bg: rgba(242,242,247,1.00); --color-primary-text: rgba(0,0,0,0.85); --color-secondary-text: rgba(0,0,0,0.7); --color-tertiary-text: rgba(0,0,0,0.55); } .dark { --color-eureka: #38B2AC; --color-primary-bg: rgba(0,0,0,1.00); --color-secondary-bg: rgba(28,28,30,1.00); --color-tertiary-bg: rgba(44,44,46,1.00); --color-primary-text: rgba(255,255,255,0.85); --color-secondary-text: rgba(255,255,255,0.7); --color-tertiary-text: rgba(255,255,255,0.55); } a:hover { @apply text-eureka transition duration-300 ease-in-out; } But when I change --color-eureka and retest my site using Hugo (hugo serve) I don't see any changes. Am I doing something wrong? Where can I change the color? ― You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#64>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AJEXGNDCWSTWXGMYIWELQ2TS6HD6HANCNFSM4XL6CKMQ>.

[kimlaberinto]

Thanks! I had to do the following, but I think I got it to work. I'm not sure if there's a better way, so if you know how, then please let me know.

First I changed the color of the text in that assets/css/base.css file.
Then in the config.yaml file I used the never flag to force it to rebuild what was necessary.

build:
  useResourceCacheWhen: never

Then in the root folder of the website (not the theme). I installed postcss-cli and postcss . EDIT: Actually its better to install all the devDependencies mentioned in the package.json file of the theme. The terminal command below is updated with all that I used. This is important because all those are used to build the site. e.g. purgecss will remove unnecessary bloat to the css files.

npm install @fullhuman/postcss-purgecss autoprefixer postcss postcss-cli postcss-import tailwindcss

Then I simply did the following, which rebuild the website with the color change I wanted.

hugo

Now that I have the color change I wanted, I re-enabled useResourceCacheWhen: always in the config.yaml and then deleted that node_modules folder and the package-lock.json file that npm install made. Whenever I want a color change, I could just do the above steps again.

[kimlaberinto]

UPDATE: I found it was better to install all the devDependencies mentioned in the package.json file of the theme. e.g. purgecss was important to optimize my site to load faster.
The npm install was updated to:

npm install @fullhuman/postcss-purgecss autoprefixer postcss postcss-cli postcss-import tailwindcss