Johani
July 25, 2022, 12:04pm
21
We did, but we missed the case where the user only sets the regular color scheme as dark. We previously relied on the OS preference to pick between the light/dark mode for the splash with the assumption that users set both and use the OS toggle.
I pushed a couple of fixes
discourse:main ← hnb-ku:splash-background-flicker
opened 07:01AM - 23 Jul 22 UTC
Context: https://meta.discourse.org/t/introducing-discourse-splash-a-visual-prel… oader-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.
discourse:main ← hnb-ku:splash-flicker-take-2
opened 12:56PM - 23 Jul 22 UTC
Follow up to: https://github.com/discourse/discourse/pull/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
If the regular scheme is dark, use that. If it’s light, use the light scheme for OS light mode and the dark scheme for OS dark mode (if it’s set)
The issue, as well as this one
should be fixed now. Thanks for the reports
11 Likes
