From 3d9464b7da85583670502fc68ea29880edaa4922 Mon Sep 17 00:00:00 2001 From: Joe <33972521+hnb-ku@users.noreply.github.com> Date: Sat, 23 Jul 2022 17:53:42 +0800 Subject: [PATCH] UX: Set theme color on splash a bit earlier (#17619) Context: https://meta.discourse.org/t/introducing-discourse-splash-a-visual-preloader-displayed-while-site-assets-load/232003/17 We currently set the theme secondary color as the background for the splash, and this works and respects light/dark modes. The issue is that we set it on the #d-splash div. That div doesn't have a specified height and only gets its height when the splash image loads. This can cause a flicker effect where the background shows for a fraction of a second while the splash image loads. This PR sets the theme color on the tag to alleviate this. This allows us to set the theme color a little bit sooner and should hopefully prevent the flicker effect from happening. This PR also adds the theme-color tag for dark mode. Browsers that don't support multiple theme-color tags will ignore the second tag and fall back to the first one. --- app/views/common/_discourse_splash.html.erb | 8 ++++++-- app/views/layouts/_head.html.erb | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/views/common/_discourse_splash.html.erb b/app/views/common/_discourse_splash.html.erb index 27adc2950ff..40bf5e07578 100644 --- a/app/views/common/_discourse_splash.html.erb +++ b/app/views/common/_discourse_splash.html.erb @@ -114,13 +114,14 @@