Light theme triggers Flash of Unstyled Content #1910

cowwoc · 2024-03-05T19:56:22Z

cowwoc
Mar 5, 2024

Describe the bug

I read #1842 so I understand that you included :root as a convenience on the light theme. The problem is that if a user loads the following HTML:

<!DOCTYPE html>
<html lang="en" class="sl-theme-dark">
...
</html>

Then initially the light theme gets applied (flash of white) and then the dark theme gets applied (flash of black). If you were to omit :root and let users explicitly choose the theme they want then I believe it would be possible to avoid this.

To Reproduce

Using Chrome, open the Network tab
Set the network throttling to "Slow 3G"
Reload the page

The problem can be reproduced with this, but throttling makes it easier to see.

Browser / OS

OS: Windows
Browser: Chrome
Browser version: Version 122.0.6261.95 (Official Build) (64-bit)

claviska · 2024-03-05T20:17:29Z

claviska
Mar 5, 2024
Maintainer

Hi there! The light theme is the "default" theme. It's scoped to :root as a convenience so users don't have to add a class anywhere, otherwise we'd be getting support requests about missing styles on a daily basis :)

One way to prevent flashing is to do like we do in the docs:

shoelace/docs/_includes/default.njk

Lines 41 to 48 in c88b38f

    
               {# Set the initial theme and menu states here to prevent flashing #} 
        
               <script> 
        
                 (() => { 
        
                   const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; 
        
                   const theme = localStorage.getItem('theme') || 'auto'; 
        
                   document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark)); 
        
                 })(); 
        
               </script>

Importantly, that script is located in the <head> so it executes before the body is shown, which prevents the flashing.

Another way is to conditionally load the light/dark stylesheets based on prefers-color-scheme, e.g.

<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)" />

I hope that helps!

0 replies

cowwoc · 2024-03-05T20:18:39Z

cowwoc
Mar 5, 2024
Author

@claviska Maybe you could add :not(.explicit-theme) to the default theme? That way, users who wish to disable a default value could add it to their <html> tag and the onus is on them to add a second tag to select a theme.

1 reply

claviska Mar 5, 2024
Maintainer

I'm not sure I'm following. The conditions we have are:

Users must be able to include the light theme and shoelace-autoloader.js and things should just work
For backwards compatibility reasons, adding the class sl-theme-dark should set the dark theme

Note that sl-theme-dark is just the class for the default theme that ships with Shoelace. We will have more in the future, and many folks already have their own themes (which should, but aren't required to follow the sl-theme-{name} pattern), so I don't know how we'd target them this way.

cowwoc · 2024-03-05T20:28:39Z

cowwoc
Mar 5, 2024
Author

Apologies. We both posted at the same time so I did not see your previous response. I am looking for a way to maintain your requirements while fixing the FOUC. Give me a minute and I will post a testcase for you to reproduce the problem on your end.

0 replies

cowwoc · 2024-03-05T20:38:57Z

cowwoc
Mar 5, 2024
Author

@claviska Please open this up on your end. It's easier to see if you host the files on a remote server, and enable "Slow 3G" throttling, but you can also see the problem if you just open the files locally and keep on hitting F5 or CTRL+F5 quickly. Let me know if you able to reproduce the problem on your end.

testcase.zip

0 replies

cowwoc · 2024-03-05T20:46:10Z

cowwoc
Mar 5, 2024
Author

I apologize. I see now that if I replace the loadStyle() code with <link rel="stylesheet" href="bundle-shoelace-UY4WEO2P.css" /> then the flashing goes away.

I guess this is a bundler problem, as they are converting <link> to JS code. I'll close this issue for now. Off the top of your head, let me know if you're aware of any way to get this working with the original JS way. Either way, thank you for your help.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Light theme triggers Flash of Unstyled Content #1910

{{title}}

Replies: 5 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Light theme triggers Flash of Unstyled Content #1910

cowwoc Mar 5, 2024

Describe the bug

To Reproduce

Browser / OS

Replies: 5 comments · 1 reply

claviska Mar 5, 2024 Maintainer

cowwoc Mar 5, 2024 Author

claviska Mar 5, 2024 Maintainer

cowwoc Mar 5, 2024 Author

cowwoc Mar 5, 2024 Author

cowwoc Mar 5, 2024 Author

cowwoc
Mar 5, 2024

Replies: 5 comments 1 reply

claviska
Mar 5, 2024
Maintainer

cowwoc
Mar 5, 2024
Author

claviska Mar 5, 2024
Maintainer

cowwoc
Mar 5, 2024
Author

cowwoc
Mar 5, 2024
Author

cowwoc
Mar 5, 2024
Author