Next.js Discord

Discord Forum

how to get rid of flashbang on load and refresh with script

Unanswered
Ratonero Murciano de Huerta posted this in #help-forum
Open in Discord
Avatar
Ratonero Murciano de HuertaOP
I have dark mode able to be selected through local strorage or system preference and read that you can get rid of FOUC with this https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection i changed it up a bit so that it works with the way i coded it but the script doesn't load or at least it consoles logs way too late and the flashbang occurs. Let me know if anyone has any fixes
Image

8 Replies

Avatar
Try rendering the script content inline instead of in a separate .js file
It takes time to download the .js file which likely contributes to the fouc
Avatar
Ratonero Murciano de HuertaOP
still nothing :sadge: thanks tho
Avatar
F :SheaWeird_Stanis23: well at least you can just use https://github.com/pacocoursey/next-themes which is guaranteed to not have fouc
Since next-themes I’ve stopped making any custom theming logic, because why do that when the lib does everything and does it well
Avatar
Ratonero Murciano de HuertaOP
yeah i was hoping i could do it myself cuz im still very new and want to try to learn it but it looks like i must give in :salute: thank you
Avatar
If you want to implement yourself you can consult the next-themes implementation, it’s not too complex. This is the entry point to the inline script https://github.com/pacocoursey/next-themes/blob/1b510445a37e7c2cddb359b5f29fe8dce9fd4855/next-themes/src/index.tsx#L203
Avatar
Ratonero Murciano de HuertaOP
LMAO okay i just followed the first few steps and it fixed instantly ty you are the goat :catKISS: