CSS - flash of no style sheet when changing theme

I have a project where there's multiple themes defined, from bright to night mode.
When changing theme (using the built in Select Theme function), the project briefly flashes to no theme at all. When going from dusk to night-theme this causes a flash to white background, which can be disturbing in a dark setting.
flash
flash
The effect is shown above.

Is there any way of avoiding this, or alternately setting the default background color to black, so that the flash to white does not occur? A css named style.css appears to be the default style, but this doesn't look like a real file, but rather a output served by the gateway, thus not easily modifiable.

I believe this is essentially the same problem as this question, which doesn't appear to have any good answers either.

Any other suggestions for how to handle this?

1 Like

The flash that you're seeing is the time it takes to apply all of your CSS rules/settings after swapping out the theme file in use.

For example, as you swap from "dusk" to "night" what is really happening is the browser is removing the existing css files and replacing them with the new files. Let's consider this t0. At this t0 point in time, it's as if no styling at all is applied, and so the project appears as standard un-styled HTML - which has a white background. After this is done, the new styles are applied in the order they're defined and according to CSS rules like inheritance and specificity. This phase takes a period of time, and somewhere during this phase the background color is being set to something approximating black. We'll call this point in time t1. Even if we were to provide a mechanism for setting the "default" fallback style of a project you'd encounter the same behavior because the settings all have to "re-calculated".

Yup, I'm aware of that. But a default style of dark would lead to the screen flashing dark - which is better in a dark environment than it flashing white, potentially disturbing users.

But the theme is the "outermost" collection of styles--where must be. The only place for defaults outside that is the browser itself. You are seeing a flash of the browser's default background. IA can't dictate your browser's default. (Might be doable in Mobile or Workstation, though.)

Even if we could change the default to black...wouldn't you just get the same problem, but inverse, switching between light styles?

1 Like

It would be less of a problem. A dark flash in daylight is less disturbing than a white flash at night. Preserving night vision is a priority.

I've tested this by modifying style.css (path /data/perspective/style-classes/Project_name/-969810916/style.css in the browser (using debug tools), and basically added html { background-color: black; }, which made it flash in black, not white...

you should not modify those files, they will get overwriten on an update,

you can just add in to the stylesheet.css

3 Likes

Thanks. Not a perfect solution, but it at least makes it less noticeable and less critical.

might be interesting to take look at this