diff --git a/src/app/ItemsPage.js b/src/app/ItemsPage.js
index 906f9c3..3ce4912 100644
--- a/src/app/ItemsPage.js
+++ b/src/app/ItemsPage.js
@@ -33,7 +33,7 @@ function ItemsPage() {
   if (loading) {
     return (
       <Box display="flex" justifyContent="center">
-        <HangerSpinner boxSize="48px" />
+        <HangerSpinner />
       </Box>
     );
   }
diff --git a/src/app/WardrobePage/support/PosePickerSupport.js b/src/app/WardrobePage/support/PosePickerSupport.js
index 0604111..56435f3 100644
--- a/src/app/WardrobePage/support/PosePickerSupport.js
+++ b/src/app/WardrobePage/support/PosePickerSupport.js
@@ -61,7 +61,7 @@ function PosePickerSupport({
   if (loading) {
     return (
       <Box display="flex" justifyContent="center">
-        <HangerSpinner boxSize="32px" />
+        <HangerSpinner size="sm" />
       </Box>
     );
   }
diff --git a/src/app/components/HangerSpinner.js b/src/app/components/HangerSpinner.js
index 0bae4a5..4505493 100644
--- a/src/app/components/HangerSpinner.js
+++ b/src/app/components/HangerSpinner.js
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { css } from "emotion";
-import { Box } from "@chakra-ui/core";
+import { Box, useColorModeValue } from "@chakra-ui/core";
 import { createIcon } from "@chakra-ui/icons";
 
 const HangerIcon = createIcon({
@@ -18,6 +18,7 @@ const HangerIcon = createIcon({
 
 function HangerSpinner({ size = "md", ...props }) {
   const boxSize = { sm: "32px", md: "48px" }[size];
+  const color = useColorModeValue("green.500", "green.300");
 
   return (
     <>
@@ -85,7 +86,12 @@ function HangerSpinner({ size = "md", ...props }) {
         `}
         {...props}
       >
-        <HangerIcon color="green.300" boxSize={boxSize} {...props} />
+        <HangerIcon
+          boxSize={boxSize}
+          color={color}
+          transition="color 0.2s"
+          {...props}
+        />
       </Box>
     </>
   );
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index 5ed5b89..9ed1bfa 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { css, cx } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
-import { Box, Flex, Text } from "@chakra-ui/core";
+import { Box, Flex, DarkMode, Text } from "@chakra-ui/core";
 import { WarningIcon } from "@chakra-ui/icons";
 
 import HangerSpinner from "./HangerSpinner";
@@ -45,7 +45,7 @@ function OutfitPreview({
   if (error || error2) {
     return (
       <FullScreenCenter>
-        <Text color="gray.50" d="flex" alignItems="center">
+        <Text color="green.50" d="flex" alignItems="center">
           <WarningIcon />
           <Box width={2} />
           Could not load preview. Try again?
@@ -55,13 +55,15 @@ function OutfitPreview({
   }
 
   return (
-    <OutfitLayers
-      loading={loading || loading2}
-      visibleLayers={loadedLayers}
-      placeholder={placeholder}
-      loadingDelay={loadingDelay}
-      doAnimations
-    />
+    <DarkMode>
+      <OutfitLayers
+        loading={loading || loading2}
+        visibleLayers={loadedLayers}
+        placeholder={placeholder}
+        loadingDelay={loadingDelay}
+        doAnimations
+      />
+    </DarkMode>
   );
 }
 
@@ -179,7 +181,7 @@ export function OutfitLayers({
           backgroundColor="gray.900"
           opacity="0.7"
         />
-        <HangerSpinner boxSize="48px" />
+        <HangerSpinner />
       </FullScreenCenter>
     </Box>
   );