fix(ui): global body background color (#102396)

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:


https://github.com/getsentry/sentry/blob/84e8645edfe70f0c537f10c5fe73246ff411c550/static/app/styles/global.tsx#L142

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 |
|--------|--------|
| <img width="1721" height="620" alt="Screenshot 2025-10-30 at 15 48 18"
src="https://github.com/user-attachments/assets/71d66611-bb05-4e15-b85b-0b4f0f751fe2"
/> | <img width="1721" height="633" alt="Screenshot 2025-10-30 at 15 48
30"
src="https://github.com/user-attachments/assets/4f0cceca-41ed-4679-8a47-941ffd65541e"
/> |

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:


https://github.com/user-attachments/assets/3c2c1501-f2f3-4d8f-bf4c-9d36e41eb6c1

after:


https://github.com/user-attachments/assets/5af0ec12-4dac-45ba-976f-42481d2d5faf

Author: TkDodo

static/app/styles/global.tsx

@@ -142,6 +142,28 @@ const styles = (theme: Theme, isDark: boolean) => css`
     background: ${theme.tokens.background.primary};
   }
 
+  ${theme.type === 'dark' &&
+  css`
+    /*this updates styles set by base.less to match our theme*/
+    body.theme-dark {
+      background: ${theme.tokens.background.primary};
+      color: ${theme.textColor};
+    }
+    body.theme-system {
+      @media (prefers-color-scheme: dark) {
+        background: ${theme.tokens.background.primary};
+        color: ${theme.textColor};
+      }
+    }
+    /*this updates styles set by shared-components.less to match our theme*/
+    .theme-dark .loading .loading-indicator {
+      background: ${theme.tokens.background.primary};
+    }
+    .theme-dark .loading.triangle .loading-indicator {
+      background: #fff;
+    }
+  `}
+
   abbr {
     ${theme.tooltipUnderline()};
   }

static/less/base.less

@@ -34,16 +34,16 @@ body {
 
 // Applied to body
 body.theme-dark {
-  // theme.surface200
-  background: #1A141F;
-  // theme.gray400
+  // theme.tokens.background.primary
+  background: #241D2A;
+  // theme.tokens.content.primary
   color: #D6D0DC;
 }
 body.theme-system {
   @media (prefers-color-scheme: dark) {
-    // theme.surface200
-    background: #1A141F;
-    // theme.gray400
+    // theme.tokens.background.primary
+    background: #241D2A;
+    // theme.content.primary
     color: #D6D0DC;
   }
 }

static/less/shared-components.less

@@ -439,8 +439,8 @@ table.table.key-value {
 }
 
 .theme-dark .loading .loading-indicator {
-  // theme.surface200
-  background: #1A141F;
+  // theme.tokens.background.primary
+  background: #241D2A;
 }
 
 @-webkit-keyframes loading {