From 3c558d2eb60546657808d9b9da0e591e30837921 Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Mon, 25 Jul 2022 18:02:21 +0800
Subject: [PATCH] UX: Prevent color flicker on dark themes (#17620)

Follow up to: #17619
Context: https://meta.discourse.org/t/introducing-discourse-splash-a-visual-preloader-displayed-while-site-assets-load/232003/17

We previously relied on the user's browser when deciding when to show the splash in light/dark mode. This worked well but can fail if the user manually selects a theme with a default "dark" scheme.

This PR will now factor that in. If the user selects a theme with a default dark scheme, use that. If a user selects a theme with a "light" default scheme and also picks a secondary "dark" scheme, use the media detection we had before.

This PR also removes the dark mode theme-color that was added in the previous PR. That will now go in a separate PR
---
 app/views/common/_discourse_splash.html.erb | 90 ++++++++++++++-------
 app/views/layouts/_head.html.erb            |  3 +-
 2 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/app/views/common/_discourse_splash.html.erb b/app/views/common/_discourse_splash.html.erb
index 40bf5e07578..3ce1009a694 100644
--- a/app/views/common/_discourse_splash.html.erb
+++ b/app/views/common/_discourse_splash.html.erb
@@ -9,6 +9,11 @@
       <style>
         :root {
           --animation-state: paused;
+        }
+
+        /* user picked a theme where the "regular" scheme is dark */
+        <%- if dark_color_scheme? %>
+        :root {
           --primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
           --secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
           --tertiary: #<%= ColorScheme.hex_for_name("tertiary", scheme_id) %>;
@@ -16,30 +21,33 @@
           --highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
           --success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
         }
+        <%- else %>
+        /* user picked a theme a light scheme and also enabled a dark scheme */
 
+        /* deal with light scheme first */
+        @media (prefers-color-scheme: light) {
+          :root {
+            --primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
+            --secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
+            --tertiary: #<%= ColorScheme.hex_for_name("tertiary", scheme_id) %>;
+            --quaternary: #<%= ColorScheme.hex_for_name("quaternary", scheme_id) %>;
+            --highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
+            --success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
+          }
+        }
+
+        /* then deal with dark scheme */
         @media (prefers-color-scheme: dark) {
           :root {
-            --animation-state: paused;
             --primary: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
-            --secondary: #<%= ColorScheme.hex_for_name(
-                "secondary",
-                dark_scheme_id
-              ) %>;
-            --tertiary: #<%= ColorScheme.hex_for_name(
-                "tertiary",
-                dark_scheme_id
-              ) %>;
-            --quaternary: #<%= ColorScheme.hex_for_name(
-                "quaternary",
-                dark_scheme_id
-              ) %>;
-            --highlight: #<%= ColorScheme.hex_for_name(
-                "highlight",
-                dark_scheme_id
-              ) %>;
+            --secondary: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
+            --tertiary: #<%= ColorScheme.hex_for_name("tertiary", dark_scheme_id) %>;
+            --quaternary: #<%= ColorScheme.hex_for_name("quaternary", dark_scheme_id) %>;
+            --highlight: #<%= ColorScheme.hex_for_name("highlight", dark_scheme_id) %>;
             --success: #<%= ColorScheme.hex_for_name("success", dark_scheme_id) %>;
           }
         }
+        <%- end %>
 
         /* these styles need to live here because the SVG has a different scope */
         .dots {
@@ -114,14 +122,47 @@
   <style>
     html {
       overflow-y: hidden !important;
+    }
+
+    /* user picked a theme where the "regular" scheme is dark */
+    <%- if dark_color_scheme? %>
+    html {
       background-color: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
     }
 
+    #d-splash .preloader-text-wrapper {
+      color: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
+    }
+    <%- else %>
+    /* user picked a theme a light scheme and also enabled a dark scheme */
+
+    /* deal with light scheme first */
+    @media (prefers-color-scheme: light) {
+      html {
+        background-color: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
+      }
+
+      #d-splash .preloader-text-wrapper {
+        color: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
+      }
+    }
+
+    /* then deal with dark scheme */
+    @media (prefers-color-scheme: dark) {
+      html {
+        background-color: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
+      }
+
+      #d-splash .preloader-text-wrapper {
+        color: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
+      }
+    }
+    <%- end %>
+
     #d-splash {
       display: grid;
       place-items: center;
       backface-visibility: hidden;
-      background-color: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
       position: absolute;
       left: 0;
       top: 0;
@@ -142,7 +183,6 @@
       animation-delay: 1s;
       animation-fill-mode: forwards;
       animation-play-state: var(--animation-state);
-      color: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
       margin-bottom: -4em;
     }
 
@@ -182,18 +222,6 @@
         content: "...";
       }
     }
-
-    @media (prefers-color-scheme: dark) {
-      html {
-        background-color: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
-      }
-      #d-splash {
-        background-color: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
-      }
-      #d-splash .preloader-text-wrapper {
-        color: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
-      }
-    }
   </style>
 
   <img
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 2f077d6788f..12db631ba84 100644
--- a/app/views/layouts/_head.html.erb
+++ b/app/views/layouts/_head.html.erb
@@ -6,8 +6,7 @@
 <%- if site_apple_touch_icon_url.present? %>
 <link rel="apple-touch-icon" type="image/png" href="<%= ::UrlHelper.absolute(site_apple_touch_icon_url) %>">
 <%- end %>
-<meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', scheme_id) %>" media="(prefers-color-scheme: light)">
-<meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', dark_scheme_id) %>" media="(prefers-color-scheme: dark)">
+<meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', scheme_id) %>">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
 <%- if Discourse.base_path.present? %>
 <meta name="discourse-base-uri" content="<%= Discourse.base_path %>">