Lately i am Diving deeply into Angular SSR.
When it comes to DarkMode and SSR/ Hydration I faced the following issue:

The site is Flickering when hydrating the angular app in cases where i am using dark mode. This happens because the Website not beeing served in DarkMode when initialy loading the Site and the darkmode gets restored from the browser later on.

Why is this happening?
In most cases you save your ìsDarkModeEnabled in the cookies as well as in the localStorage. That's perfect, but Frontend logic for example appending classes to document elements can't run in the SSR Context.

To solve this i found a simple solution.

What you need to do, is check your cookies if dark mode is set, and append the class by manipulating the response body if needed.

This should look like this:

After that when i load my page with JS Disabled it get's served perfectly fine in darkmode.

Hope this helped you in some way!
Have a nice day and feel free to leave Feedback :)