From 51bdb87fd8ec547b9f47db10b7c11bc271d435f5 Mon Sep 17 00:00:00 2001
From: Micha Reiser <micha@reiser.io>
Date: Sun, 6 Apr 2025 19:30:21 +0200
Subject: [PATCH] [red-knot] Fix loading color in dark mode (#17237)

## Summary

The loading indicator on dark mode isn't "visible" because it's black on
black. Use white as text color instead.
---
 playground/knot/src/Editor/SecondaryPanel.tsx | 4 +++-
 playground/knot/src/Playground.tsx            | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/playground/knot/src/Editor/SecondaryPanel.tsx b/playground/knot/src/Editor/SecondaryPanel.tsx
index 8ebdb71af6..191e1c8d9f 100644
--- a/playground/knot/src/Editor/SecondaryPanel.tsx
+++ b/playground/knot/src/Editor/SecondaryPanel.tsx
@@ -109,7 +109,9 @@ function Run({ files, theme }: { files: ReadonlyFiles; theme: Theme }) {
   }
 
   return (
-    <Suspense fallback={<div className="text-center">Loading</div>}>
+    <Suspense
+      fallback={<div className="text-center dark:text-white">Loading</div>}
+    >
       <RunWithPyiodide
         theme={theme}
         files={files}
diff --git a/playground/knot/src/Playground.tsx b/playground/knot/src/Playground.tsx
index c3942044cb..2c4a5d796c 100644
--- a/playground/knot/src/Playground.tsx
+++ b/playground/knot/src/Playground.tsx
@@ -480,7 +480,11 @@ function updateFile(
 }
 
 function Loading() {
-  return <div className="align-middle  text-center my-2">Loading...</div>;
+  return (
+    <div className="align-middle text-current text-center my-2 dark:text-white">
+      Loading...
+    </div>
+  );
 }
 
 function restoreWorkspace(