Darkmode Implementation
Answered
Philippine Crocodile posted this in #help-forum
Philippine CrocodileOP
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"?
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"?
Answered by B33fb0n3
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:
1. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app
2. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Others havent worked for me
You want to choose one from this:
1. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app
2. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Others havent worked for me
4 Replies
@Philippine Crocodile 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"?
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:
1. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app
2. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Others havent worked for me
You want to choose one from this:
1. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app
2. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Others havent worked for me
Answer
Should just use shadcns dark mode implementation.