Light/Dark Mode Needs Page Refresh to Properly Display

Questions
1

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.

01
011882×1046 101 KB

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.

02
021858×1226 74.9 KB

Only after refreshing the page, everything is displayed correctly.

03
031872×1098 64.5 KB

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!

2

Okay,

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?