feat(ui): Add dark app loading theme (#81611)

src/sentry/templates/sentry/base-react.html

@@ -18,3 +18,5 @@
     </div>
   </div>
 {% endblock %}
+
+{% block wrapperclass %}{{ user_theme }}{% endblock %}

src/sentry/web/frontend/react_page.py

@@ -88,6 +88,14 @@ class ReactMixin:
 
     def handle_react(self, request: Request, **kwargs) -> HttpResponse:
         org_context = getattr(self, "active_organization", None)
+        react_config = get_client_config(request, org_context)
+
+        user_theme = ""
+        if react_config.get("user", None) and react_config["user"].get("options", {}).get(
+            "theme", None
+        ):
+            user_theme = f"theme-{react_config['user']['options']['theme']}"
+
         context = {
             "CSRF_COOKIE_NAME": settings.CSRF_COOKIE_NAME,
             "meta_tags": [
@@ -100,7 +108,8 @@ class ReactMixin:
             # Since we already have it here from the OrganizationMixin, we can
             # save some work and render it faster.
             "org_context": org_context,
-            "react_config": get_client_config(request, org_context),
+            "react_config": react_config,
+            "user_theme": user_theme,
         }
 
         # Force a new CSRF token to be generated and set in user's

static/less/base.less

@@ -32,6 +32,22 @@ body {
   min-height: 100vh;
 }
 
+// Applied to body
+body.theme-dark {
+  // theme.surface200
+  background: #1A141F;
+  // theme.gray400
+  color: #D6D0DC;
+}
+body.theme-system {
+  @media (prefers-color-scheme: dark) {
+    // theme.surface200
+    background: #1A141F;
+    // theme.gray400
+    color: #D6D0DC;
+  }
+}
+
 h1,
 h2,
 h3,

static/less/shared-components.less

@@ -438,6 +438,11 @@ table.table.key-value {
   }
 }
 
+.theme-dark .loading .loading-indicator {
+  // theme.surface200
+  background: #1A141F;
+}
+
 @-webkit-keyframes loading {
   0% {
     -webkit-transform: rotate(0deg);
@@ -519,6 +524,19 @@ table.table.key-value {
   }
 }
 
+.theme-dark .loading.triangle .loading-indicator {
+  filter: invert(100%);
+  opacity: 0.8;
+}
+body.theme-system {
+  @media (prefers-color-scheme: dark) {
+    .loading.triangle .loading-indicator {
+      filter: invert(100%);
+      opacity: 0.8;
+    }
+  }
+}
+
 /**
 * Box
 * ============================================================================