congo icon indicating copy to clipboard operation
congo copied to clipboard

`logoDark` & `logo` parameters reversed in hybrid header layout with `defaultAppearance` set to "dark"

Open socrabytes opened this issue 1 year ago • 2 comments

Issue description

In config file params.toml, the header.logo and header.logoDark parameters seem to be swapped. The dark mode logo appears in light mode and vice versa. The only customization I’ve made is setting defaultAppearance = "dark" instead of the default "light", which might be related to the issue. Otherwise, no significant customizations come to mind.

defaultAppearance = "dark" 
autoSwitchAppearance = true

[header]
  layout = "hybrid" 
  logo = "img/logo-dark.png" # Bug: theme improperly handling logo versions of light/dark
  logoDark = "img/logo.png" 

This is a minor issue, but I thought it would be helpful to report it. Thank you for providing this theme and for all the effort you’ve put into maintaining it!

Theme version

v2.9.0

Hugo version

hugo v0.134.3+extended linux/amd64

Which browser rendering engines are you seeing the problem on?

Chromium (Google Chrome, Microsoft Edge, Brave, Vivaldi, Opera, etc.)

URL to sample repository or website

https://github.com/socrabytes/socrabytes.github.io

Hugo output or build error messages

N/A

socrabytes avatar Sep 22 '24 23:09 socrabytes

Issue description

In config file params.toml, the header.logo and header.logoDark parameters seem to be swapped. The dark mode logo appears in light mode and vice versa. The only customization I’ve made is setting defaultAppearance = "dark" instead of the default "light", which might be related to the issue. Otherwise, no significant customizations come to mind.

defaultAppearance = "dark" 
autoSwitchAppearance = true

[header]
  layout = "hybrid" 
  logo = "img/logo-dark.png" # Bug: theme improperly handling logo versions of light/dark
  logoDark = "img/logo.png" 

This is a minor issue, but I thought it would be helpful to report it. Thank you for providing this theme and for all the effort you’ve put into maintaining it!

Theme version

v2.9.0

Hugo version

hugo v0.134.3+extended linux/amd64

Which browser rendering engines are you seeing the problem on?

Chromium (Google Chrome, Microsoft Edge, Brave, Vivaldi, Opera, etc.)

URL to sample repository or website

https://github.com/socrabytes/socrabytes.github.io

Hugo output or build error messages

N/A

Does the issue still occur if the default appearance is not dark mode?

Jh123x avatar Sep 24 '24 09:09 Jh123x

Yes, theme displays same behavior with defaultAppearance = "light"


I’ve also noticed something strange in Vivaldi when Windows is set to Dark Mode and the site’s default appearance is also dark. The background color doesn’t display correctly, and it looks off.

In Brave, everything works as expected — the site loads in dark mode and toggles properly to light mode. But in Vivaldi, it starts in this weird, mismatched dark mode and only switches to the correct one after toggling. This might just be a quirk with how browsers handle dark mode, but it’s still an edge case worth pointing out.

image

Note: The logo is currently a PNG, not an SVG, which is contributing to the display issue. Using a proper vector (SVG) logo would likely resolve this specific problem.

socrabytes avatar Sep 24 '24 19:09 socrabytes

If I see it correctly there only needs to be a switch of hidden and dark:hidden ... the thing with flex I did not understand completly but it seems to work like I posted it below

\congo\layouts\partials\logo.html

  {{- if $logo }}
    <a href="{{ "" | relLangURL }}" class="mr-2">
      <!-- prettier-ignore-attribute -->
      <img
        src="{{ $logo.RelPermalink }}"
        width="{{ div $logo.Width 2 }}"
        height="{{ div $logo.Height 2 }}"
        class="max-h-[10rem] max-w-[10rem] object-scale-down object-left
        {{ if $logo_dark }}dark:hidden flex{{ end }}"
        alt="{{ .Site.Title }}"
      />
      {{- if $logo_dark }}
        <img
          src="{{ $logo_dark.RelPermalink }}"
          width="{{ div $logo_dark.Width 2 }}"
          height="{{ div $logo_dark.Height 2 }}"
          class="max-h-[10rem] max-w-[10rem] object-scale-down object-left hidden dark:flex"
          alt="{{ .Site.Title }}"
        />
      {{- end }}

betahoven avatar Dec 27 '24 12:12 betahoven

I have the same problem.

chewstiltzoo avatar Mar 05 '25 11:03 chewstiltzoo

I am also noticing this reversal in my installation. It remains the same whether defaultApperance is set to "dark" or "light".

SpencerDub avatar Apr 17 '25 21:04 SpencerDub

Thanks everyone, this has been fixed for the next release!

jpanther avatar Jun 22 '25 04:06 jpanther