content/en/post/configure-logo-and-accent-color.md

metadata

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-26T00:00:00.000Z
lastmod: 2025-02-03T00:00:00.000Z
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:

: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:

[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:

[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.