Light/Dark Mode Needs Page Refresh to Properly Display

Hello Everyone,

I have implemented a light/dark mode in my single-page application:

  • In the database, I added a new field to the User, namely “theme” with a field type that links to an option set, namely “themeUI”;
  • The “themeUI” option set has two options, one for light, and one for dark;
  • Each option carries several attributes, eg “colorForeground”, “colorBackground” etc;
  • On the Page HTML Header, I added a CSS with the corresponding color option, eg “color: Current User’s theme’s ColorForeground;” and have called it up on various text, button, or icon elements across the page.

Here’s an example (in German) with the button that acts as a switch between light and dark.

Now, when the user clicks on that button, a workflow “makes changes to current user”, moving from “theme = light” to “theme = dark”. However, most elements keep their light-mode color.

Only after refreshing the page, everything is displayed correctly.

This tells me that the logic is set up correctly, but still something is missing …

Has anyone had similar issues or an idea as to why this is happening?

Many thanks for your time!


Here’s what I just found out: If I place an HTML element anywhere on the page and include all the code from the Page HTML Header, everything works as intended. So, I got a solution, but am asking myself: What is the Page HTML Header for?