Colors, Fonts and Plugins

To change website colors, fonts, and plugins. Please open the my-project/themes/config.toml file.

For maintaining it from forestry, you can find it at the bottom of the left sidebar. The file called Variables & Plugins

Change Website Colors

Under the params.variables section, you will have all the parameters to change the website color preferences. For example, if you change the value of primary_color, the primary color of the whole website.

example code:

[params.variables]
primary_color = "green"
body_color = "#fff"
text_color = "#666666"
text_dark = "#222222"
text_light = "#959595"
border_color = "#ACB9C4"
black = "#000"
white = "#fff"
light = "#fdfdfd"

Change Website fonts

Below the color variables, you will get the font variables, and you can change the value of those variables as per your requirements.

Visit Google Fonts to see the fonts that are available to you. Then select the font you want to use. Then copy the bold part of the URL and paste it in the primary_font field. It will change the font of the website’s primary text. google-fonts

If you want to change the value of the primary font type, you can change it to either sans-serif or serif as per your requirement.

example code:

primary_font = "Roboto:ital,wght@0,300;0,400;1,400"
primary_font_type = "sans-serif" # [serif/sans-serif]
secondary_font = "Work+Sans"
secondary_font_type = "serif" # [serif/sans-serif]

Third-Party Plugins

You can add or remove third-party plugins from here. We create a loop for plugins. You can see two plugins loops here, the first one is for css, and the last one is for js.

Sometimes you need to close the Hugo server and run again for rendered correctly.

CSS plugins

[[params.plugins.css]]
link = "https://cdn.examplesite.com/your-plugin.css"
attributes = "your-attributes" # optional field

js plugins

[[params.plugins.js]]
link = "https://cdn.examplesite.com/your-plugin.js"
attributes = "your-attributes" # optional field
Improve this page on Github  — Last updated:  Thu, Sep 16, 2021