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...
- if
{{#match @custom.color_scheme "Dark"}} and @custom.white_logo_for_dark_mode, print <img> for @custom.white_logo_for_dark_mode
- 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
- else print
<img> for @site.logo
Alto and Dawn double-print
@site.logo<img>when@custom.white_logo_for_dark_modeexists: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...
@custom.white_logo_for_dark_modebut then switches the color scheme to light. Under current logic/PR 373, the dark logo would still show.@custom.white_logo_for_dark_modeand 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...
{{#match @custom.color_scheme "Dark"}}and@custom.white_logo_for_dark_mode, print<img>for@custom.white_logo_for_dark_mode{{#match @custom.color_scheme "Auto"}}and@custom.white_logo_for_dark_mode, print<img>for@site.logoand@custom.white_logo_for_dark_modeand add IDs/classes anddisplay: noneCSS to control which<img>renders<img>for@site.logo