Dark/Light mode in AEM

[Aleksandre]

Hello colleagues,

Our team has encountered a problem while implementing the dark/light mode in AEM.

Our first attempt was to store the mode in JS local storage. However, because AEM sets the default mode in the body earlier, the screen starts flickering. It switches to dark mode first, and then switches to light mode.

Next, we tried using cookies to set the mode on the AEM side. However, at the time of page load, we no longer go to the server on the dispatcher. The cookie value is cached and we still get the default state upon reload.

As a result, we agreed on two options:

1. Use Sling Dynamic Include to get the dynamic cache state from the server and set the necessary mode on load.
2. Add a blocking script on JS that will run during the body loading.

If you have experience in solving a similar problem, please share it.

Thank you in advance.

[arunpatidar · Accepted solution]

Hi,

You can try setting the theme color in the HTML node as well, please check this if helps

https://www.pullrequest.com/blog/how-to-implement-dark-mode-with-css-js/