how to get rid of flashbang on load and refresh with script
Answered
Ratonero Murciano de Huerta posted this in #help-forum
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
Answered by joulev
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
8 Replies
@Ratonero Murciano de Huerta 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
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
@joulev It takes time to download the .js file which likely contributes to the fouc
Ratonero Murciano de HuertaOP
still nothing 
thanks tho
thanks tho@Ratonero Murciano de Huerta still nothing <:sadge:714576821819146373> thanks tho
F 
well at least you can just use https://github.com/pacocoursey/next-themes which is guaranteed to not have fouc
well at least you can just use https://github.com/pacocoursey/next-themes which is guaranteed to not have foucSince next-themes I’ve stopped making any custom theming logic, because why do that when the lib does everything and does it well
@joulev Since next-themes I’ve stopped making any custom theming logic, because why do that when the lib does everything and does it well
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 
thank you
thank youIf 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
Answer
@joulev 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>
Ratonero Murciano de HuertaOP
LMAO okay i just followed the first few steps and it fixed instantly ty you are the goat 