AdonisJS Framework
[RESOLVED] Any way to resolve dark mode page flicker navigating between pages? #4379
Replies: 2 comments 4 replies
-
|
Are you having this in production or just in development? If it's just in development, it's likely due to how Vite is plopping the styles onto the page. In development, it'll plop all the styles inside a |
Beta Was this translation helpful? Give feedback.
-
|
That’s an interesting thought. I haven’t deployed to a hosting service yet, so this is just development. I’m curious if there’s a solution for development though as the navigation in dark mode is quite jarring and frankly, looks unpolished. In the meantime, I will go through the build and deploy flow and report back if the issue still persists in prod. Thanks for the suggestion. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, I believe it's plopped into a Within // import '../css/app.css'Within import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
export default defineConfig({
plugins: [
adonisjs({
entrypoints: ['resources/js/app.js', 'resources/css/app.css'],
// ...
}),
],
})Within your layout or pages, add it to the <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> {{ title || "Let's Learn AdonisJS 6" }} </title>
@vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>
<div class="max-w-3xl mx-auto mt-6">
@include('partials/nav')
{{{ await $slots.main() }}}
</div>
</body> |
Beta Was this translation helpful? Give feedback.
-
|
You are amazing!!! Thank you very much. Coincidentally, my deployment to AWS (Elastic Beanstalk) just finished and, sure enough, to your first comment, it works just fine in production. No FOUC. |
Beta Was this translation helpful? Give feedback.
-
|
Anytime!! Awesome, I'm happy to hear you're not having FOUC on production! 😄 |
Beta Was this translation helpful? Give feedback.
-
|
I followed the instructions, but why the problem still occurred? still flickering. I use daisyui and theme-changer |
Beta Was this translation helpful? Give feedback.
-
Is there any way to avoid page flicker using Edge pages in dark mode (Tailwind) when navigating between pages? Currently I’m using Javascript in the page header to set (and maintain) the theme using local storage. On-page updates with HTMX don't cause any flicker (since only portions of the page are being replaced), but navigating from one page to another (in dark mode) leads to the dreaded FOUC on each transition. Is this a limitation of using Edge for the front-end? It would be great if there was a way to solve this as I'd love to stick with Edge.
Beta Was this translation helpful? Give feedback.
All reactions