When navigating between pages using dark mode, we can see the moon icon showing for a split second and then change to the sun icon. This is due to the fact that we're changing the icon based on a cookie client-side in a non-blocking JS file (main.js, line 44).
I see two possible solutions:
- extract the theme changing logic to a separate file and add that to the head instead of the body to act as a render-blocking resource. This way when the browser renders the HTML the correct classes will be added, but it could negatively impact SEO / web vitals
- use some logic to add the
hidden class based on the cookie in the template rather than in a separate JS file, so it'll run on the server instead of the client, similar to how we add the colors to the heatmap (we have theme as a global variable available for that).
When navigating between pages using dark mode, we can see the moon icon showing for a split second and then change to the sun icon. This is due to the fact that we're changing the icon based on a cookie client-side in a non-blocking JS file (main.js, line 44).
I see two possible solutions:
hiddenclass based on the cookie in the template rather than in a separate JS file, so it'll run on the server instead of the client, similar to how we add the colors to the heatmap (we havethemeas a global variable available for that).