Themes icon indicating copy to clipboard operation
Themes copied to clipboard

Alto & Dawn need additional logic for white_logo_for_dark_mode to render correctly

Open alexgmathews opened this issue 1 year ago • 0 comments

Alto and Dawn double-print @site.logo <img> when @custom.white_logo_for_dark_mode exists:

<img src="{{@site.logo}}" alt="{{@site.title}}">
{{#if @custom.white_logo_for_dark_mode}}
    <img src="{{img_url @custom.white_logo_for_dark_mode}}" alt="{{@site.title}}">
{{/if}}

At first, I thought of creating an if/else switch to control which <img> tag to print (see PR 373).

However, that still wouldn't handle cases such as...

  • the user uploads @custom.white_logo_for_dark_mode but then switches the color scheme to light. Under current logic/PR 373, the dark logo would still show.
  • the user uploads @custom.white_logo_for_dark_mode and sets the color scheme to auto. Under current logic/PR 373, the dark logo would always show.

I think the logic needs to be more complex to handle the theme's automatic light/dark theming. Something like...

  1. if {{#match @custom.color_scheme "Dark"}} and @custom.white_logo_for_dark_mode, print <img> for @custom.white_logo_for_dark_mode
  2. if {{#match @custom.color_scheme "Auto"}} and @custom.white_logo_for_dark_mode, print <img> for @site.logo and @custom.white_logo_for_dark_mode and add IDs/classes and display: none CSS to control which <img> renders
  3. else print <img> for @site.logo

alexgmathews avatar Nov 21 '24 21:11 alexgmathews