Describe the bug
When user prefers dark theme on their machine (prefers-color-scheme: dark), the theme on /upload page flickers from light to dark as JavaScript code is initializes and switches to dark.
Steps to reproduce
Run npm run dev locally under telescopetest-io/ folder and navigate to http://localhost:4321/upload page.
Reload the page multiple times to see the flicker.
To have more consistent environment for debugging, open DevTools and disable JavaScript - this will still allow the initial CSS style application, but will stop JS logic that overrides it.
Expected results
Theme should not flicker and should be applied using CSS.
Observed results
Theme flickers from light to dark.
Additional context
The theme is set using CSS variables set for just the default light them and [data-theme='dark'] selector which matches HTML tag attribute set using JS code.
Add appropriate default styles for default theme selection and for light forced version so both dark and light can be served by default and set as an override.
Describe the bug
When user prefers dark theme on their machine (
prefers-color-scheme: dark), the theme on/uploadpage flickers from light to dark as JavaScript code is initializes and switches to dark.Steps to reproduce
Run
npm run devlocally undertelescopetest-io/folder and navigate tohttp://localhost:4321/uploadpage.Reload the page multiple times to see the flicker.
To have more consistent environment for debugging, open DevTools and disable JavaScript - this will still allow the initial CSS style application, but will stop JS logic that overrides it.
Expected results
Theme should not flicker and should be applied using CSS.
Observed results
Theme flickers from light to dark.
Additional context
The theme is set using CSS variables set for just the default light them and
[data-theme='dark']selector which matches HTML tag attribute set using JS code.Add appropriate default styles for default theme selection and for
lightforced version so bothdarkandlightcan be served by default and set as an override.