mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2026-07-22 04:06:57 -04:00
62e6a813c8
Currently, when the user's theme is set to "Same as system", the string
"system" is written as the settings.theme key in Local Storage. When the
page first loads, a JavaScript function in `<head>` injects the value of
settings.theme ("system") into the `data-theme` attribute of the
`<html>` tag with the aim of immediately selecting the correct CSS theme
file. However, there is no matching CSS file for "data-theme=system" in
static/styles/themes.
Eventually, the `setTheme()` function in static/themes.ts figures out
the correct theme CSS file to use. In the interim, for users who have
dark mode enabled on their system, they see a flash of white until
`setTheme()` finishes because DOM rendering has already begun before
`setTheme()` starts.
The fix is to set `data-theme` at the start to:
* "dark" when the system is in dark mode and (settings.theme == "system"
or unset); and
* "default" when the system is **not** in dark mode and (settings.theme
== "system" or unset).
This PR also fixes a second issue: the "real-dark" and "onedark"
settings.theme values are currently not handled properly by the `<head>`
script. For "real-dark", `data-theme` needs to be "dark" and for
"onedark", `data-theme` needs to be "one-dark". Again, this is handled
correctly by static/themes.ts, so this bug merely results in a temporary
flash were the wrong CSS is applied until static/themes.ts runs.
See demo:
https://github.com/user-attachments/assets/e6d232dd-a805-46f2-9bd6-e730391862c5