style: 应用安装二维码支持黑暗模式

Author: icyleaf

app/controllers/releases/qrcode_controller.rb

@@ -3,25 +3,42 @@
 class Releases::QrcodeController < ApplicationController
   before_action :set_release
 
-  LIGHT_BACKGROUND_COLOR = 'FFFFFF'
-  LIGHT_COLOR = '465960'
+  THEMES = {
+    light: {
+      fill: '#FFFFFF',
+      color: '#465960'
+    },
+    dark: {
+      fill: '#343a40',
+      color: '#F0F4Fb'
+    },
+  }
 
   ##
   # 显示应用的二维码
   # GET /apps/:slug/(:version)/qrcode
   def show
-    options = {
-      module_px_size: qrcode_size,
-      fill: "##{params.fetch(:fill, LIGHT_BACKGROUND_COLOR)}",
-      color: "##{params.fetch(:color, LIGHT_COLOR)}"
-    }
-
     render qrcode: friendly_channel_release_url(@release.channel, @release), **options
   end
 
   private
 
-  def qrcode_size
+  def options
+    {
+      module_px_size: px_size,
+      fill: theme[:fill],
+      color: theme[:color]
+    }
+  end
+
+  def theme
+    @theme ||= -> do
+      name = params.fetch(:theme, 'light') == 'light' ? :light : :dark
+      THEMES[name]
+    end.call
+  end
+
+  def px_size
     case params[:size]
     when 'thumb'
       3

app/helpers/apps_helper.rb

@@ -82,4 +82,18 @@ def channel_platform(channel)
   def changelog_format(changelog, **options)
     simple_format changelog, **options
   end
+
+  def qrcode_image_tag(release)
+    logger.debug Setting.site_appearance
+    logger.debug "Sdfsafasdfasdfsadfd"
+    if Setting.site_appearance != 'auto'
+      return image_tag channel_release_qrcode_path(@release.channel, @release, size: :large, theme: Setting.site_appearance)
+    end
+
+    content_tag(:picture) do
+      content_tag(:source, media: "(prefers-color-scheme: dark)", srcset: channel_release_qrcode_path(release.channel, release, size: :large, theme: :dark)) do
+        image_tag channel_release_qrcode_path(release.channel, release, size: :large)
+      end
+    end
+  end
 end

app/views/releases/sidebar/_qrcode.html.slim

@@ -8,5 +8,8 @@
         i.fas.fa-minus
   .card-body.text-center.p-0
     .qr_code
-      = image_tag channel_release_qrcode_path(@release.channel, @release, size: :large)
+      = qrcode_image_tag(@release)
+      / picture
+      /   source srcset="#{channel_release_qrcode_path(@release.channel, @release, size: :large, theme: :dark)}" media="(prefers-color-scheme: dark)"
+      /   = image_tag channel_release_qrcode_path(@release.channel, @release, size: :large)
   .card-footer.text-center = t('releases.show.scan_qrcode_with_any_suppprted_app')