diff --git a/src/app/WardrobePage/WardrobeOutfitPreview.js b/src/app/WardrobePage/WardrobeOutfitPreview.js
index 9988652..5b1b36c 100644
--- a/src/app/WardrobePage/WardrobeOutfitPreview.js
+++ b/src/app/WardrobePage/WardrobeOutfitPreview.js
@@ -7,6 +7,7 @@ import OutfitThumbnail, {
   getOutfitThumbnailRenderSize,
 } from "../components/OutfitThumbnail";
 import OutfitPreview from "../components/OutfitPreview";
+import { DarkMode } from "@chakra-ui/react";
 
 function WardrobeOutfitPreview({
   isLoading,
@@ -14,16 +15,18 @@ function WardrobeOutfitPreview({
   onChangeHasAnimations,
 }) {
   return (
-    <OutfitPreview
-      isLoading={isLoading}
-      speciesId={outfitState.speciesId}
-      colorId={outfitState.colorId}
-      pose={outfitState.pose}
-      appearanceId={outfitState.appearanceId}
-      wornItemIds={outfitState.wornItemIds}
-      onChangeHasAnimations={onChangeHasAnimations}
-      backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
-    />
+    <DarkMode>
+      <OutfitPreview
+        isLoading={isLoading}
+        speciesId={outfitState.speciesId}
+        colorId={outfitState.colorId}
+        pose={outfitState.pose}
+        appearanceId={outfitState.appearanceId}
+        wornItemIds={outfitState.wornItemIds}
+        onChangeHasAnimations={onChangeHasAnimations}
+        backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
+      />
+    </DarkMode>
   );
 }
 
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index d13381f..d648393 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, DarkMode, Flex, Text } from "@chakra-ui/react";
+import { Box, DarkMode, Flex, Text, useColorModeValue } from "@chakra-ui/react";
 import { WarningIcon } from "@chakra-ui/icons";
 import { ClassNames } from "@emotion/react";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
@@ -77,11 +77,13 @@ export function useOutfitPreview({
     }
   }, [layersHaveAnimations, onChangeHasAnimations]);
 
+  const textColor = useColorModeValue("green.700", "white");
+
   let preview;
   if (error || error2) {
     preview = (
       <FullScreenCenter>
-        <Text color="green.50" d="flex" alignItems="center">
+        <Text color={textColor} d="flex" alignItems="center">
           <WarningIcon />
           <Box width={2} />
           Could not load preview. Try again?