Adjust theme-color for mobile layout

app/helpers/application_helper.rb

@@ -16,7 +16,11 @@ module ApplicationHelper
     ].compact.join(" ")
 
     unless options[:icon].nil?
-      body = "#{content_tag(:i, '', class: "mdi-#{options[:icon]}")} #{body}"
+      if options[:icon_only]
+        body = "#{content_tag(:i, '', class: "fa fa-#{options[:icon]}", title: body)}"
+      else
+        body = "#{content_tag(:i, '', class: "fa fa-#{options[:icon]}")} #{body}"
+      end
     end
     unless options[:badge].nil?
       # TODO: make this prettier?

app/helpers/theme_helper.rb

@@ -56,6 +56,15 @@ module ThemeHelper
     end
   end
 
+  def mobile_theme_color
+    theme = get_active_theme
+    if theme
+      "##{get_hex_color_from_theme_value(theme.background_color)}"
+    else
+      '#f0edf4'
+    end
+  end
+
   def get_active_theme
     if @user&.theme
       if user_signed_in?

app/models/theme.rb

@@ -20,4 +20,8 @@ class Theme < ApplicationRecord
   def theme_color
     ('#' + ('0000000' + primary_color.to_s(16))[-6, 6])
   end
+
+  def mobile_theme_color
+    ('#' + ('0000000' + background_color.to_s(16))[-6, 6])
+  end
 end

app/views/layouts/base.haml

@@ -3,8 +3,9 @@
   %head
     %meta{ charset: 'utf-8' }
     %meta{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }
-    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' }
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover' }
-    %meta{ name: 'theme-color', content: theme_color }
+    %meta{ name: 'theme-color', content: theme_color, media: '(min-width: 993px)' }
+    %meta{ name: 'theme-color', content: mobile_theme_color, media: '(max-width: 992px)' }
     %link{ rel: 'apple-touch-icon', href: '/apple-touch-icon-precomposed.png' }
     %link{ rel: 'icon', href: '/images/favicon/favicon-16.png', sizes: '16x16' }
     %link{ rel: 'icon', href: '/icon-152.png', sizes: '152x152' }