diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
index 171e2d4..ace263b 100644
--- a/src/components/SkeletonLoader.tsx
+++ b/src/components/SkeletonLoader.tsx
@@ -11,7 +11,7 @@ export function SkeletonBox(props: SkeletonProps) {
       aria-label="Loading..."
       role="status"
     >
-      <Spinner size="md" />
+      <Spinner size="md" inverse />
     </div>
   );
 }
@@ -23,7 +23,7 @@ export function SkeletonText(props: SkeletonProps) {
       aria-label="Loading..."
       role="status"
     >
-      <Spinner size="sm" />
+      <Spinner size="sm" inverse />
     </div>
   );
 }
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index ef8dde2..f9c8e92 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,4 +1,4 @@
-import { onMount, onCleanup, createSignal, JSX } from "solid-js";
+import { onMount, onCleanup, createSignal } from "solid-js";
 import { isServer } from "solid-js/web";
 
 const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -7,6 +7,7 @@ export interface SpinnerProps {
   size?: "sm" | "md" | "lg" | "xl" | number;
   class?: string;
   "aria-label"?: string;
+  inverse: boolean;
 }
 
 const sizeMap = {
@@ -47,7 +48,7 @@ export function Spinner(props: SpinnerProps) {
 
   return (
     <span
-      class={`text-crust font-mono ${sizeClass()} ${props.class || ""}`}
+      class={`font-mono ${sizeClass()} ${props.class || ""} ${props.inverse ? "text-text" : "text-crust"}`}
       style={style()}
       aria-label={props["aria-label"] || "Loading..."}
       role="status"