Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 <HTML> background shows for a fraction of a second while the splash image loads.

This PR sets the theme color on the <HTML> 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 <meta> 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.
This commit is contained in:
Joe 2022-07-23 17:53:42 +08:00 committed by GitHub
parent edb931e7e5
commit 3d9464b7da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/views/common/_discourse_splash.html.erb
View File

@ -114,13 +114,14 @@
<style> <style>
html { html {
overflow-y: hidden !important; overflow-y: hidden !important;
background-color: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
} }
#d-splash { #d-splash {
display: grid; display: grid;
place-items: center; place-items: center;
backface-visibility: hidden; backface-visibility: hidden;
background: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>; background-color: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -183,8 +184,11 @@
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html {
background-color: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
}
#d-splash { #d-splash {
background: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>; background-color: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
} }
#d-splash .preloader-text-wrapper { #d-splash .preloader-text-wrapper {
color: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>; color: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;

3
app/views/layouts/_head.html.erb
View File

@ -6,7 +6,8 @@
<%- if site_apple_touch_icon_url.present? %> <%- if site_apple_touch_icon_url.present? %>
<link rel="apple-touch-icon" type="image/png" href="<%= ::UrlHelper.absolute(site_apple_touch_icon_url) %>"> <link rel="apple-touch-icon" type="image/png" href="<%= ::UrlHelper.absolute(site_apple_touch_icon_url) %>">
<%- end %> <%- end %>
<meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', scheme_id) %>"> <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="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <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? %> <%- if Discourse.base_path.present? %>
<meta name="discourse-base-uri" content="<%= Discourse.base_path %>"> <meta name="discourse-base-uri" content="<%= Discourse.base_path %>">