Fix text color for OutfitPreview

Oops, I never actually saw the practically invisible text in light mode! Let's make it actually dark in light mode item pages, and still dark in all wardrobe pages!

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,6 +15,7 @@ function WardrobeOutfitPreview({
   onChangeHasAnimations,
 }) {
   return (
+    <DarkMode>
       <OutfitPreview
         isLoading={isLoading}
         speciesId={outfitState.speciesId}
@@ -24,6 +26,7 @@ function WardrobeOutfitPreview({
         onChangeHasAnimations={onChangeHasAnimations}
         backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
       />
+    </DarkMode>
   );
 }
 

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?