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

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
This commit is contained in:
Joe 2022-07-25 18:02:21 +08:00 committed by GitHub
parent 43b8cfeae3
commit 3c558d2eb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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 %>">