fix(ui): global body background color

[TkDodo]

This PR has two fixes:

1. we were using the wrong background color in base.less for our theme-dark override, it was pointing to theme.surface200, but our “main” background color is theme.surface300 (actually theme.tokens.background.primary, but in UI1, this points to surface300.

I’ve updated that value and changed the comments to reflect the real location.

This body background color isn’t visible a lot, because if we remove the theme-dark classname, our global body css will take effect, and that already points to the real value:

sentry/static/app/styles/global.tsx

Line 142 in 84e8645

background: ${theme.tokens.background.primary};

However, this had the effect that e.g. the settings page could look different (in both UI1 and UI2) depending on if that class was still attached to the body or not, because body.theme-dark has a higher css specificity than just body. You can see that if you go to settings and switch between light and dark mode, you get different results:

with theme-dark class	after switching themes

This is where fix 2) comes in, where I’ve also added body.theme-dark (and the system one) to our global react styles so that they will also override those classes with the correct color.

This is especially important for UI1 because the colors in base.less are UI1 colors and we definitely don’t want to see them in UI2. After UI1 is removed, we could actually revert the second fix because the colors would “match”.

Another situation where this helps if when loaders from lazy-loading are displayed because they were also showing that (wrong) background color, resulting in flashes.

before:

Screen.Recording.2025-10-30.at.15.21.23.mov

after:

Screen.Recording.2025-10-30.at.15.51.48.mov

[sentry]

Bug: The body.theme-dark CSS rule uses lightTheme colors when isDark is false, if theme-dark class persists on body.
_{Severity: MEDIUM | Confidence: 0.95}

🔍 Detailed Analysis

The body.theme-dark CSS rule evaluates with lightTheme colors when isDark is false, but the theme-dark class remains on the body element. This occurs when the theme changes via paths other than the hotkey (e.g., settings page, backend updates), which prevents removeBodyTheme() from being called. Consequently, if the theme-dark class persists on the body while the application is in light mode, the background will incorrectly display light mode colors, leading to visual inconsistencies.

💡 Suggested Fix

Use theme.inverted to style the body.theme-dark class, or conditionally apply different background colors based on the isDark prop, similar to existing patterns in the file.

🤖 Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/app/styles/global.tsx#L146-L153

Potential issue: The `body.theme-dark` CSS rule evaluates with `lightTheme` colors when
`isDark` is `false`, but the `theme-dark` class remains on the `body` element. This
occurs when the theme changes via paths other than the hotkey (e.g., settings page,
backend updates), which prevents `removeBodyTheme()` from being called. Consequently, if
the `theme-dark` class persists on the `body` while the application is in light mode,
the background will incorrectly display light mode colors, leading to visual
inconsistencies.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

[JonasBa]

We need to remove isDark here, that shouldn't exist as we pass the theme in anyways.

[TkDodo]

you’re right, I think to keep the code the same as in base.less I’ll add an if around this. we only need it for dark theme, and once UI1 is deleted and we updated base.less, we can actually remove this again.

[JonasBa]

Love the high quality investigation and explanation @TkDodo, you are setting a great example here 🙏🏼

[TkDodo]

I know this looks weird, but hear me out: With @natemoo-re’s fix we are now taking the html from the splash loader and add it to the OrganizationLoadingIndicator in react’s context. But, if we have theme-dark, we still have global styles that have an invert filter applied:

sentry/static/less/shared-components.less

Lines 528 to 531 in a82d1ed

	.theme-dark .loading.triangle .loading-indicator {
	filter: invert(100%);
	opacity: 0.8;
	}

so by re-setting the .theme-dark .loading .loading-indicator to background.primary, the triangle becomes white again because of the filter.

All of this is a mess and will hopefully become better with the new splash loader. Those global styles and invert filter are a pain and I hope we can remove them once that lands.

[TkDodo]

however, this now reliably fixes that the loading spinner sometimes had the wrong background color. It’s really a pity that we mix and re-use styles for our loading spinner and the loading triangle with .loading and .loading.triangle...

but imo with the new splash loader, all those .trinagle things hopefully go away