Darkmode Implementation | Next.js | Page 1

acoustic dagger Oct 5, 2024, 4:35 AM

#

I am currently implementing dark mode in my next.js application that works by fetching a localstorage value then setting the data-theme in the body tag equal to something.

In react I put a script tag in the App.js however now when I put this script in the layout.js file it works on routes that don't require a api call server side, but on routes that require a server side api call it flickers before the response is given and then goes to the set mode, is there a way to fix this or like push the script with priority or something? apologies I'm relatively new to next and tried to quote the docs.

TLDR: Is there a way to push <script> rendering infront of server side api calls so my dark mode doesnt flicker something better then strategy="beforeInteractive"?

jade flameBOT Oct 5, 2024, 4:35 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

pallid scroll Oct 5, 2024, 5:41 AM

#

acoustic dagger I am currently implementing dark mode in my next.js application that works by fe...

yes, you can use jsx to css to style your server component. Like that the styling is also delivered from the server directly and like that the styling is already done and that from the first millisecond the client can see the page

You want to choose one from this:

Others havent worked for me