Spaces:
Sleeping
Sleeping
File size: 1,607 Bytes
2f461e6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
---
author : ['Author Name']
title: "Configure Logo and Accent Color"
description: "How to configure the Logo and Accent Color in Hugo Brewm theme"
date: 2025-01-26
lastmod: 2025-02-03
type: post
draft: false
translationKey: logo
coffee: 1
tags: ['configuration', 'logo', 'color', 'accent']
categories: ['configuration']
---
The Hugo Brewm theme allows you to easily configure your site's logo and accent color taylored to your brand. Follow these steps to set up your logo:
## Change Color Accent
To make the color accent align with your brand identity, you can customize the accent color in `custom.css` under `assets/css`.
For example, in `exampleSite/assets/css/custom.css`:
```css
:root {
--ac-light: #36b;
--ac-dark: #fa1;
}
```
## Adding Logo Image / Logomark Icon
> Prepare your logo image
>
> - Create or prepare your logo image file (recommended formats: PNG or SVG)
> - For best results, use an image with a transparent background
> - Recommended dimensions: height of 50px to 70px
> - You can also add dark mode version of your logo
Configure the logo in your site configuration:
```toml
[params]
logoMark = 'https://example.com/logoMark.svg'
logoMarkDark = 'https://example.com/logoMarkDark.svg' #optional
```
## Using Logo Type Preset
If you prefer not to use an image logo, you can enable the built-in text-based logo by adding this setting:
```toml
[params]
logoType = true
```
After making these changes, rebuild your site to see the updated logo. The logo will automatically appear in the site's header and will be responsive across different device sizes. |