fix(branding): use <picture> for auto color-scheme wordmark and preserve explicit light/dark behavior

Author: lindwurm

app/helpers/branding_helper.rb

@@ -12,8 +12,21 @@ def logo_as_symbol(version = :icon)
   end
 
   def _logo_as_symbol_wordmark
-    image_path = page_color_scheme == 'light' ? 'images/logo_wordmark_lightbg.png' : 'images/logo_wordmark.png'
-    image_tag(frontend_asset_path(image_path), class: 'logo logo--wordmark', height: '24px')
+    light_logo = frontend_asset_path('images/logo_wordmark_lightbg.png')
+    dark_logo = frontend_asset_path('images/logo_wordmark.png')
+
+    case page_color_scheme
+    when 'light'
+      image_tag(light_logo, class: 'logo logo--wordmark', height: '24px')
+    when 'dark'
+      image_tag(dark_logo, class: 'logo logo--wordmark', height: '24px')
+    else
+      content_tag(:picture) do
+        tag.source(srcset: light_logo, media: '(prefers-color-scheme: light)') +
+          tag.source(srcset: dark_logo, media: '(prefers-color-scheme: dark)') +
+          image_tag(dark_logo, class: 'logo logo--wordmark', height: '24px')
+      end
+    end
   end
 
   def _logo_as_symbol_icon