import '../app.css';, Dark Mode, and const ssr = false; - background-color blink

[lukaszpolowczyk]

In CSR Mode (const ssr = false;), the style loaded with:

<!-- src/routes/+layout.svelte -->
<script>
  import '../app.css';
</script>

/* src/app.css */

@media (prefers-color-scheme: dark) {
  :root {
    --color: white;
    --background-color: #333;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color: #333;
    --background-color: white;
  }
}

html, body {
  color: var(--color);
  background-color: var(--background-color);
}

Causes a blinking white background. Even though dark mode is enabled on the system.
When const ssr = true;, there is no this problem.

QUEST:
Where is the best place to put the global style, universally? Regardless of whether SSR is enabled or disabled?

I currently place the style in static/app.css and load in app.html...

<link rel="stylesheet" href="%sveltekit.assets%/app.css">.

...but even the Hello World example uses import '../app.css';, so importing styles is recommended so generally?

BETTER QUESTION:
Are there plans or anything to make such an imported style available even before CSR starts?

Maybe loading src/+layout.svelte BEFORE rendering starts, if there is no src/+layout.js? Or something similar?

The most important thing is consistent DX.
An unpleasant blink in the user's eyes when the developer fails to anticipate this CSR behavior is also something worth avoiding. It is worth designing the framework to avoid such an unpleasant experience.

[lukaszpolowczyk]

If anyone thinks this is a joke or something unimportant:
Twitter, YouTube, Google has a lot of problems with reloading in dark mode.

I'm writing in deadly seriousness, this is something worth looking into, and securing.

[mattcroat]

To avoid that problem I set the theme before the page loads in the <script> tag inside app.html but in your case it should be even simpler.

[lukaszpolowczyk]

I also currently do this when I have an application without SSR (I wrote about it).
Otherwise it would blink white in dark mode, and it's not pleasant.

But the point is that import '../app.css'; is incorrect. It is incorrectly used with an application without SSR.
It is correct with SSR, but it is WRONG without SSR.

If you can, you need to do something about it....
I don't know what would be best. It seems to me that leaving "as is", is not the best.
Ideally, without SSR, it should be able to apply a global +layout.svelte or something similar, before it renders....

Otherwise, the developer himself has to notice this problem with his application without SSR, and fix this bug. But it's not obvious, and this mistake is bound to be made.
I know that not everything can be remedied, but IF there is any possibility, I think it is worth it.

---

Currently app.html is always loading, so it is the only sure place to solve this problem.
But the global +layout.svelte ALSO is loaded ALWAYS. It is intentional that it is loaded ALWAYS. This is a rule that solves other problems (it's been this way since the introduction of (group), and I hope it won't change again).
You can take advantage of this, and prerender(?) the global layout, regardless of the setting. And the setting in src/routes/+layout.svelte would only apply to sub-elements, but not to the global layout itself.
I am afraid that you will reject this, because it will be confusing, but I VOICE THINK, maybe it will be acceptable after all?

---

Note that +layout.svelte has advantages that you can't get in app.html.
If the enhancements that can be used in app.html could be used in +layout.svelte, such as loading modules (including those from node_modules, also those provided by SvelteKit via Vite), then there would be less of a problem. This is just a general statement.
But it seems to me that SvelteKit WANTS as much as possible to be limited to layout and other svelte files, because they are the only ones that are supported, and have all these improvements.

[david-plugge]

You pretty much can not extract styles without server rendering the app so some sort of prerendering is needed.

Maybe loading src/+layout.svelte BEFORE rendering starts, if there is no src/+layout.js? Or something similar?

You can´t load a js module before rendering since it is deferred by default.

So you either have to prerender or link the styles in app.html.

[lukaszpolowczyk]

Can you evaluate this proposal, on this issue from this discussion?

Global Layout on server side, Page on client side. Global layout as shell
#6636

[lukaszpolowczyk]

Mr. @Conduitry rejected my proposal #6636

I'm also writing here for someone to see:

Of course that this behavior IS NOT expected. I described it in the Story!

We already had a situation where you thought the user was smarter than he actually could be - sveltejs/svelte#5797 (comment)
And later you went to your senses and did something better.
Why do we have to repeat this?!

1. I ASSUME that adding this code to app.html is not something ok, just like hacking SvelteKit, because SvelteKit has some shortcomings!!!
   The +layout option in SSR, and the rest of the layout and all pages without SSR, would be a great addition!

2. In my opinion, you have to assume that someone might misuse your tool. You've already learned that here - Clear information about the initial, broken code in the Tutorial on svelte.dev/tutorial/ svelte#5797 (comment), but you're back at it again. :/
   Even people from YouTube, Google, Twitter, they made a mistake - their dark mode blinks on refresh. Seriously! Why do you think that a random SvelteKit user will be smarter than all of them? After all, you can't think like that. :D

3. WHAT'S MOST RECOMMENDED AND DOMESTIC in +layout.svelte import '../app.css' ; is not universal!

4. There are other links, so it is not enough to simply translate import '../app.css'; into app.html, because it will not work. You have to match the link, to app.html, that is from where the css is loaded from.

5. You can only stiffly <link rel="stylesheet" href="src/s.css"> and that's it! because even <script type="module">import "./src/s.css";</script> causes a blink.

6. Not to mention that it is impossible to set different page backgrounds, for different pathname, so that they do not blink.
   (ok, my suggestion doesn't include different backgrounds for different pathnames either, but you could think further...)

7. HMR does not respond. (when I load <script type="module" src="src/s.js"></script>, it responds, but that's not the point of breaking everything into separate files, right?)
   Another proof that using something in app.html is just a hack! It's not even well supported by SvelteKit!

8. In app.html it does not even support loading a module from node_modules. :|
   

9. Probably doesn't support many benefits that are only in svelte files. :/

app.html does not replace it!

---

PS I apologize for the emotional tone of this post.

[lukaszpolowczyk]

The simplest solution to the problem (although I haven't tested it much):

<!-- src/routes/+layout.svelte -->
<script>
  import '../app.css';
  import { browser } from "$app/environment";
</script>

{#if browser}
  <slot />
{/if}

And src/routes/+layout.svelte with export const ssr = true; (as it is by default).

It hadn't occurred to me before.... :D

[jdgamble555]

This is not a solution, it will flicker.

[lukaszpolowczyk]

@jdgamble555 Did you check this? It definitely didn't flicker for me. Pay attention to ssr = true in +layout.svelte.

[jdgamble555]

Ok, nm, my issue might be a different one

svecosystem/mode-watcher#95 (comment)