PreLoader Custom Color Logo

assets/javascripts/discourse/initializers/community-landing-admin-tabs.js

@@ -50,6 +50,7 @@ const DESCRIPTIONS = {
   preloader_bg_light: "Preloader background for light mode.",
   preloader_text_color_dark: "Percentage text color for dark mode.",
   preloader_text_color_light: "Percentage text color for light mode.",
+  preloader_logo_color: "Logo color. Works with single-color SVG logos on transparent background.",
   preloader_bar_color: "Progress bar color. Leave blank for accent color.",
   preloader_min_duration: "Minimum display time (ms). Prevents a flash on fast connections.",
 
@@ -280,7 +281,7 @@ const TABS = [
       "preloader_enabled", "preloader_logo_url",
       "preloader_bg_dark", "preloader_bg_light",
       "preloader_text_color_dark", "preloader_text_color_light",
-      "preloader_bar_color", "preloader_min_duration"
+      "preloader_logo_color", "preloader_bar_color", "preloader_min_duration"
     ])
   },
   {

assets/stylesheets/community_landing/landing.css

@@ -2159,11 +2159,15 @@ html, .cl-body {
 }
 
 .cl-preloader__logo {
-  max-width: 120px;
-  max-height: 60px;
-  width: auto;
-  height: auto;
-  object-fit: contain;
+  width: 120px;
+  height: 60px;
+  background: var(--cl-preloader-logo-color, var(--cl-preloader-text, #ffffff));
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
 }
 
 .cl-preloader__counter {

config/locales/en.yml

@@ -44,6 +44,7 @@ en:
     preloader_bg_light: "Preloader background color for light mode."
     preloader_text_color_dark: "Percentage counter text color for dark mode."
     preloader_text_color_light: "Percentage counter text color for light mode."
+    preloader_logo_color: "Logo color override. Works with single-color SVG logos. Leave blank for white (dark mode) or inherits text color."
     preloader_bar_color: "Progress bar color. Leave blank to use the accent color."
     preloader_min_duration: "Minimum time (ms) the preloader is shown, even if loading finishes sooner. Prevents a flash on fast connections. Default: 800."
 

config/settings.yml

@@ -143,6 +143,9 @@ plugins:
   preloader_text_color_light:
     default: ""
     type: color
+  preloader_logo_color:
+    default: ""
+    type: color
   preloader_bar_color:
     default: ""
     type: color

lib/community_landing/page_builder.rb

@@ -158,7 +158,7 @@ module CommunityLanding
       html << "<div id=\"cl-preloader\" class=\"cl-preloader\">\n"
       html << "  <div class=\"cl-preloader__content\">\n"
       if logo
-        html << "    <img src=\"#{e(logo)}\" alt=\"\" class=\"cl-preloader__logo\">\n"
+        html << "    <div class=\"cl-preloader__logo\" style=\"-webkit-mask-image: url('#{e(logo)}'); mask-image: url('#{e(logo)}');\"></div>\n"
       end
       html << "    <div class=\"cl-preloader__counter\" id=\"cl-preloader-pct\">0%</div>\n"
       html << "    <div class=\"cl-preloader__bar\"><div class=\"cl-preloader__bar-fill\" id=\"cl-preloader-bar\"></div></div>\n"

lib/community_landing/style_builder.rb

@@ -72,6 +72,7 @@ module CommunityLanding
       preloader_text_dark = safe_hex(:preloader_text_color_dark)
       preloader_text_light = safe_hex(:preloader_text_color_light)
       preloader_bar       = safe_hex(:preloader_bar_color)
+      preloader_logo      = safe_hex(:preloader_logo_color)
 
       orb_color     = safe_hex(:orb_color)
       orb_opacity   = [[@s.orb_opacity.to_i, 0].max, 100].min rescue 50
@@ -112,6 +113,7 @@ module CommunityLanding
       dark_extras << "\n  --cl-preloader-bg: #{preloader_bg_dark};" if preloader_bg_dark
       dark_extras << "\n  --cl-preloader-text: #{preloader_text_dark};" if preloader_text_dark
       dark_extras << "\n  --cl-preloader-bar: #{preloader_bar};" if preloader_bar
+      dark_extras << "\n  --cl-preloader-logo-color: #{preloader_logo};" if preloader_logo
 
       light_extras = +""
       light_extras << "\n  --cl-navbar-signin-color: #{navbar_signin_light || navbar_signin_dark};" if navbar_signin_light || navbar_signin_dark
@@ -128,6 +130,7 @@ module CommunityLanding
       light_extras << "\n  --cl-preloader-bg: #{preloader_bg_light || preloader_bg_dark};" if preloader_bg_light || preloader_bg_dark
       light_extras << "\n  --cl-preloader-text: #{preloader_text_light || preloader_text_dark};" if preloader_text_light || preloader_text_dark
       light_extras << "\n  --cl-preloader-bar: #{preloader_bar};" if preloader_bar
+      light_extras << "\n  --cl-preloader-logo-color: #{preloader_logo};" if preloader_logo
 
       "<style>
 :root, [data-theme=\"dark\"] {