amethyst/content/setup/config.md

---
title: "Customization"
tags:
- setup
weight: 0
---

# Configuration
Amethyst is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get.

The majority of configuration can be found under `config.yaml`. An example, with descriptions for each setting, can be found [here](https://github.com/64bitpandas/amethyst/blob/main/config.yaml).

### Code Block Titles
To add code block titles with Amethyst:

1. Ensure that code block titles are enabled in the configuration:

    ```yaml {title="data/config.yaml", linenos=false}
    enableCodeBlockTitle: true
    ```

2. Add the `title` attribute to the desired [code block
   fence](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences):

      ```markdown {linenos=false}
       ```yaml {title="data/config.yaml"}
       enableCodeBlockTitle: true  # example from step 1
       ```
      ```

**Note** that if `{title=<my-title>}` is included, and code block titles are not
enabled, no errors will occur, and the title attribute will be ignored.

### HTML Favicons
If you would like to customize the favicons, you 
can add them to the `data/config.yaml` file. The **default** without any set 
`favicon` key is:

```html {title="layouts/partials/head.html", linenostart=15}
<link rel="shortcut icon" href="icon.png" type="image/png">
```

The default can be overridden by defining a value to the `favicon` key in your 
`data/config.yaml` file. For example, here is a `List[Dictionary]` example format, which is
equivalent to the default:

```yaml {title="data/config.yaml", linenos=false}
favicon:
  - { rel: "shortcut icon", href: "icon.png", type: "image/png" }
#  - { ... } # Repeat for each additional favicon you want to add
```

In this format, the keys are identical to their HTML representations.

If you plan to add multiple favicons generated by a website (see list below), it
may be easier to define it as HTML. Here is an example which appends the 
**Apple touch icon** to Amethyst's default favicon:

```yaml {title="data/config.yaml", linenos=false}
favicon: |
  <link rel="shortcut icon" href="icon.png" type="image/png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```

This second favicon will now be used as a web page icon when someone adds your 
webpage to the home screen of their Apple device. If you are interested in more 
information about the current and past standards of favicons, you can read 
[this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/).

**Note** that all generated favicon paths, defined by the `href` 
attribute, are relative to the `static/` directory.

### Graph View
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`. The default configuration, with descriptions, can be found [here](https://github.com/64bitpandas/amethyst/blob/main/data/graphConfig.yaml).

### Language Support
[Chinese, Japanese, and Korean support](features/language.md) comes out of the box with Amethyst.

Want to support languages that read from right-to-left (like Arabic)? Hugo (and by proxy, Amethyst) supports this natively.

Follow the steps [Hugo provides here](https://gohugo.io/content-management/multilingual/#configure-languages) and modify your `config.yaml`

For example:

```yaml
defaultContentLanguage: ar
languages:
  ar:
    languagedirection: rtl
    title: مدونتي
    weight: 2
```

# Custom Styles
Want to go even more in-depth? You can add custom CSS styling in `assets/_custom.scss`. If you'd like to target specific parts of the site, you can add ids and classes to the HTML partials in `/layouts/partials`. 

### Changing the Color Scheme
The default color schemes for light mode and dark mode are located in `assets/_colors.scss`. You can replace the values for existing color variables for drop-in edits, or create new variables to reference in `_custom.scss`.

### Changing the Fonts
All fonts are defined in `assets/_fonts.scss`. There are examples for both local fonts (defined using `@font-face`) and webfonts (fetched with `@import` from a font distributor such as Google Fonts).

You can place all local fonts in the `static/fonts` folder.

### Partials
Partials are what dictate what gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in `/layouts`.

For example, the structure of the home page can be edited through `/layouts/index.html`. To customize the footer, you can edit `/layouts/partials/footer.html`

More info about partials on [Hugo's website.](https://gohugo.io/templates/partials/)

Still having problems? Checkout our [FAQ and Troubleshooting guide](setup/troubleshooting.md).