fix: update ColourSchemeButton and dev index to fix flash

[VictoriaBeilsten-Edmands]

This PR:

• Updates guidance for using MUI's InitColorSchemeScript in SSR applications.
• Adds guidance for client-side applications (Vite etc.) to initialise data-mode before React mounts.
• Updates ColourSchemeButton to avoid rendering while the colour scheme is unresolved.
• Updates ColourSchemeButton tests to reflect the use of dark (moon) icon in light mode.

Dark mode flicker was being caused by the page initially rendering without a data-mode attribute. The default light token set was applied before React and MUI restored the user's saved preference. The script applies the correct mode before the first paint. The ColourSchemeButton now waits for MUI to resolve the active mode before rendering, avoiding initially showing the wrong icon. Placing InitColorSchemeScript in main.tsx is not correct as it runs too late after React has mounted.

Flash still visible in the dev app because Vite injects CSS dynamically via JavaScript during development for fast HMR, but production builds extract and load CSS ahead of app rendering. We may want to look into extracting css file. See https://www.xjavascript.com/blog/how-to-extract-css-as-a-separate-css-file-in-vite/

[gfrn]

Looks good to me, I was actually dealing with this a couple of minutes ago, so I can confirm it does work as described for SSR apps

[zoharma]

@VictoriaBeilsten-Edmands Thank you. I've added also the CSS updates to the button, have you seen that?

-> src/components/controls/ColourSchemeButton.tsx

[VictoriaBeilsten-Edmands]

@VictoriaBeilsten-Edmands Thank you. I've added also the CSS updates to the button, have you seen that?

-> src/components/controls/ColourSchemeButton.tsx

If it's a styling/CSS update, it should be in its own PR.

[zoharma]

@VictoriaBeilsten-Edmands This was to remove the flashing from the MRT on change

[VictoriaBeilsten-Edmands]

I'm not sure what you mean.