Cupper theme - Having dark mode use an alternative logo file

Using Themes
1

Hello,

Using cupper theme by @zwbetz.

Two questions (because my google-fu seems to be lacking)

  1. I know the advantages of using a svg for dark mode. I would like to use a png instead. How would one make hugo use an alt image if the person switches to dark mode?

  2. I have seen numerous answers but none that work: how do you keep a current year for Copyright notifications within the footer setting within config.toml.

Thank you.

2

Hi @joelouthan. Your first task is to decide how you want to make your theme changes, e.g. fork the theme, override the theme via file placement. etc.

To change the image type, change the filename in this line:

In the footer partial, add something like this to get the current year:

{{ $current_year := now.Format "2006" }}
{{ $current_year }}
3

@zwbetz Thank you. I did that for the logo and it works.

Is there a way to change logo if the person switches to Dark Mode?

4

What do you mean?

5

@zwbetz Probably referencing the new system dark modes that have been introduced introduced on OSX, Windows, iOS, Android, and some Linux desktops.
@joelouthan You might take a look at the Newsroom theme; I believe it has this feature.

6

At the bottom of the Cupper theme, there is a button that is in the theme that switches the site from dark to light mode.

@Leoj03 thank you

7

It’s possible. You’d need to edit the JS function that fires when that button is clicked.

1 Like
8

You can add class to your logo. Then add its class to your dark mode code. I use that method for my own blog.

1 Like
9

Okay here was my solution:

  1. I didn’t want to use a svg. I wanted to use a png and switch it out a la social media profile pic.
  2. I wanted css to make a circular border for me

Within cupper’s assets/css/template-styles.css, right beneath .logo img:
.circular--square {
border-radius: 50%;
}

Then, within layouts/partials/header.html, added this before src=:
<img class="circular--square" src=

Works like a charm.

I might experiment with using svg. For right now, this is what I want.

1 Like