# CSS - flash of no style sheet when changing theme **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [February 28, 2023, 10:54am UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412 "2023-02-28T10:54:14Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Vidar\_Loekken](https://avatars.discourse-cdn.com/v4/letter/v/87869e/32.png) [@Vidar\_Loekken](https://forum.inductiveautomation.com/u/Vidar_Loekken)\ **Post date:** [February 28, 2023, 10:54am UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/1 "2023-02-28T10:54:14Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/c/fc9eccb6691921ab2ba225815bd004971b25e40d.gif) ![flash](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/1/01804840f08e66bf3a7902d6097077df6e5645b4.gif) 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](https://forum.inductiveautomation.com/t/switching-between-theme-cause-font-flash-of-unstyled-text-effect/44725), which doesn't appear to have any good answers either. Any other suggestions for how to handle this? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [February 28, 2023, 4:36pm UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/2 "2023-02-28T16:36:18Z")
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". ---
**Author:** ![Vidar\_Loekken](https://avatars.discourse-cdn.com/v4/letter/v/87869e/32.png) [@Vidar\_Loekken](https://forum.inductiveautomation.com/u/Vidar_Loekken)\ **Post date:** [February 28, 2023, 5:07pm UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/3 "2023-02-28T17:07:28Z")
> [@cmallonee](#): > > 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. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [February 28, 2023, 5:10pm UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/4 "2023-02-28T17:10:52Z")
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.) ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [February 28, 2023, 5:12pm UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/5 "2023-02-28T17:12:24Z")
Even if we could change the default to black...wouldn't you just get the same problem, but inverse, switching between light styles? ---
**Author:** ![Vidar\_Loekken](https://avatars.discourse-cdn.com/v4/letter/v/87869e/32.png) [@Vidar\_Loekken](https://forum.inductiveautomation.com/u/Vidar_Loekken)\ **Post date:** [February 28, 2023, 7:18pm UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/6 "2023-02-28T19:18:34Z")
> [@paul-griffith](#): > > Even if we could change the default to black...wouldn't you just get the same problem, but inverse, switching between light styles? 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. > [@pturmel](#): > > 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.) 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... ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [March 1, 2023, 7:27am UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/7 "2023-03-01T07:27:20Z")
you should not modify those files, they will get overwriten on an update, you can just add in to the stylesheet.css ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/562a0d0e1aa8156bf8d012b4050c2b5634e53edc.png) ---
**Author:** ![Vidar\_Loekken](https://avatars.discourse-cdn.com/v4/letter/v/87869e/32.png) [@Vidar\_Loekken](https://forum.inductiveautomation.com/u/Vidar_Loekken)\ **Post date:** [March 1, 2023, 8:02am UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/8 "2023-03-01T08:02:01Z")
Thanks. Not a _perfect_ solution, but it at least makes it less noticeable and less critical. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 28, 2023, 1:33pm UTC](https://forum.inductiveautomation.com/t/css-flash-of-no-style-sheet-when-changing-theme/70412/9 "2023-06-28T13:33:14Z")
> [@Perspective Page Transitions?](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/15): > > hehe well you can preload styles if you have this issue when changing theme mage (i think or my pc is to fast to notice) you can preload styles i put this script on my header docked view. going from dark to dark-cool nolonger flashes white code = """\