Skip to content

Commit 6af8eba

Browse files
docs(v4): update "Colors and Fonts" section in README (#549)
1 parent ab3339a commit 6af8eba

File tree

1 file changed

+17
-11
lines changed

1 file changed

+17
-11
lines changed

v4-README.md

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ Please use the following guidelines if you want to start a discussion:
100100

101101
## Requirements
102102

103-
- **Hugo** (version >= 0.109.0), see this [guide](https://gohugo.io/getting-started/installing/) on how to install Hugo.
103+
- **Hugo** (version >= 0.109.0 **extended**), see this [guide](https://gohugo.io/getting-started/installing/) on how to install Hugo.
104104
- **Git**, see this [guide](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) on how to install Git.
105105
- **Go** (version >= 1.18), optional, required only when the Bilberry theme is used as a Hugo module; see
106106
this [guide](https://go.dev/doc/install) on how to install Go.
@@ -892,21 +892,27 @@ Read Hugo's [documentation](https://gohugo.io/content-management/syntax-highligh
892892

893893
### Colors and Fonts
894894

895-
Bilberry uses SCSS for styling and NPM with [Laravel Mix](https://laravel-mix.com/) for the dependency management.
895+
Styling is implemented using SCSS along with [npm](https://www.npmjs.com/), which is only used for the development
896+
dependency management. Colors and fonts can be customized via variables defined in
897+
the [`assets/sass/theme.scss`](v4/assets/sass/theme.scss) file.
896898

897-
To change any colors or fonts, you have to follow these steps:
899+
For example, if you want to customize the `$base-color` variable, you should define the `baseColor` parameter in your
900+
site's `config.toml` file.
898901
899-
1. In your site's `themes/bilberry-hugo-theme` directory, execute `npm install`.
900-
2. Modify the `assets/sass/_variables.scss` file to customize your colors.
901-
If you want to change the header's color, only edit the `$base-color` variable.
902-
3. Use `npm run dev` for development and preview purposes and `npm run production` when you're done with the changes.
902+
```sass
903+
$base-color: {{ .Param "baseColor" | default "#1d1f38" }};
904+
```
905+
906+
```toml
907+
[params]
908+
baseColor = "#ff8080"
909+
```
903910
904911
### CSS and JS modules
905912
906-
This theme supports hot-swappable CSS and JavaScript extensions.
907-
Modules can be specified using the `(css|js)_modules` list parameter.
908-
Modules can be specified either relative to the `static` directory (e.g. `exampleSite/static/css/custom.css`) or as a
909-
URL.
913+
This theme supports hot-swappable CSS and JavaScript extensions, which can be specified using the `css_modules`
914+
and `js_modules` list parameters in your site's `config.toml` file. Modules can be specified either relative to the `static`
915+
directory (e.g. `exampleSite/static/css/custom.css`) or as a URL.
910916

911917
Modules are imported in the order they appear in the list, and immediately after the default Bilberry CSS and JS files
912918
are imported.

0 commit comments

Comments
 (0)