diff --git a/playbook/app/pb_kits/playbook/pb_body/_body.scss b/playbook/app/pb_kits/playbook/pb_body/_body.scss
index 36419107d6..79c6a70cdb 100755
--- a/playbook/app/pb_kits/playbook/pb_body/_body.scss
+++ b/playbook/app/pb_kits/playbook/pb_body/_body.scss
@@ -1,24 +1,25 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-[class^=pb_body_kit]{
+[class^="pb_body_kit"] {
   @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{"" + $color_name}] {
       @include pb_body($color_value);
     }
     @each $status_name, $status_value in $pb_body_status {
-      &[class*=_default_#{$status_name}] {
+      &[class*="_default_#{$status_name}"] {
         @include pb_body($status_value);
       }
     }
   }
-  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
-    &[class*=_#{$dark_color_name}][class*=dark]{
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+    &[class*="_#{$dark_color_name}"][class*="dark"] {
       @include pb_body($dark_color_value);
     }
   }
-  b, strong {
+  b,
+  strong {
     font-weight: $bold;
   }
 
@@ -29,7 +30,8 @@
     }
   }
 
-  em, i {
+  em,
+  i {
     font-style: italic;
   }
 
@@ -39,26 +41,25 @@
   }
 
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=#{$status_name}] {
+    &[class*="#{$status_name}"] {
       @include pb_body($status_value);
     }
   }
 
-  &[class*=dark] {
+  &[class*="dark"] {
     a {
       color: $active_dark;
     }
     @include pb_body_dark();
-    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
-      &[class*=_#{$dark_color_name}][class*=dark]{
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+      &[class*="_#{$dark_color_name}"][class*="dark"] {
         @include pb_body($dark_color_value);
       }
     }
-    @each $status_name, $status_value in $pb_body_status {
-      &[class*=_#{$status_name}] {
+    @each $status_name, $status_value in $pb_dark_body_status {
+      &[class*="_#{$status_name}"] {
         @include pb_body($status_value);
       }
     }
   }
-
 }
diff --git a/playbook/app/pb_kits/playbook/pb_body/_body_mixins.scss b/playbook/app/pb_kits/playbook/pb_body/_body_mixins.scss
index dc226eb1b9..87637e4e7e 100644
--- a/playbook/app/pb_kits/playbook/pb_body/_body_mixins.scss
+++ b/playbook/app/pb_kits/playbook/pb_body/_body_mixins.scss
@@ -3,29 +3,35 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default:        $text_lt_default,
-  light:          $text_lt_light,
-  lighter:        $text_lt_lighter,
-  link:           $primary,
-  error:          $error,
-  success:        $text_lt_success_sm,
+  default: $text_lt_default,
+  light: $text_lt_light,
+  lighter: $text_lt_lighter,
+  link: $primary,
+  error: $error,
+  success: $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
-  default:        $text_dk_default,
-  light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
-  link:           $active_dark,
-  error:          $error,
-  success:        $text_dk_success_sm,
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  link: $active_dark,
+  error: $error,
+  success: $text_dk_success_sm,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default:        $text_lt_default,
-  negative:       $error,
-  dark_error:     $error_dark_body,
-  positive:       $text_lt_success_sm,
+  default: $text_lt_default,
+  negative: $error,
+  dark_error: $error_dark_body,
+  positive: $text_lt_success_sm,
+);
+
+$pb_dark_body_status: (
+  default: $text_dk_default,
+  negative: $error_dark,
+  positive: $text_dk_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {
diff --git a/playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx b/playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
index bf01464aef..23c3f26e63 100644
--- a/playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
+++ b/playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
@@ -1,40 +1,46 @@
-import React from 'react'
-import classnames from 'classnames'
+import React from "react"
+import classnames from "classnames"
 
-import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { buildCss, buildHtmlProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
 
-import Body from '../pb_body/_body'
-import Icon from '../pb_icon/_icon'
+import Body from "../pb_body/_body"
+import Icon from "../pb_icon/_icon"
 
-const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
-  increase: 'positive',
-  decrease: 'negative',
-  neutral: 'neutral',
+const statusMap: {
+  neutral: "neutral"
+  decrease: "negative"
+  increase: "positive"
+} = {
+  increase: "positive",
+  decrease: "negative",
+  neutral: "neutral",
 }
 
 const iconMap = {
-  increase: 'arrow-up',
-  decrease: 'arrow-down',
+  increase: "arrow-up",
+  decrease: "arrow-down",
 }
 
 type StatChangeProps = {
-  change?: 'increase' | 'decrease' | 'neutral',
-  className?: string,
-  icon?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  value?: string | number,
+  change?: "increase" | "decrease" | "neutral"
+  className?: string
+  dark?: boolean
+  icon?: string
+  id?: string
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  value?: string | number
 }
 
 const StatChange = (props: StatChangeProps): React.ReactElement => {
-  const { 
-    change = 'neutral', 
-    className, 
+  const {
+    change = "neutral",
+    className,
+    dark = false,
     htmlOptions = {},
-    icon, 
-    id, 
-    value 
+    icon,
+    id,
+    value,
   } = props
 
   const status = statusMap[change as keyof typeof statusMap]
@@ -47,30 +53,32 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
 
   return (
     <>
-      {value &&
+      {value && (
         <div
             className={classnames(
-              buildCss('pb_stat_change_kit', status),
-              globalProps(props),
-              className
-              )}
+            buildCss("pb_stat_change_kit", status),
+            globalProps(props),
+            className
+          )}
             id={id}
             {...htmlProps}
         >
-          <Body status={status}>
-            {returnedIcon &&
+          <Body dark={dark}
+              status={status}
+          >
+            {" "}
+            {returnedIcon && (
               <>
-                <Icon
+                <Icon dark={dark}
                     fixed_width
                     icon={returnedIcon}
-                />
-                {' '}
+                />{" "}
               </>
-            }
+            )}
             {`${value}%`}
           </Body>
         </div>
-      }
+      )}
     </>
   )
 }
diff --git a/playbook/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb b/playbook/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb
index 73f23e63b7..fd91418111 100644
--- a/playbook/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb
@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
-      <%= pb_rails("body", props: { status: object.status }) do %>
-        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
-        <%= "#{object.value}%" if object.value %>
-      <% end %>
+  <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
+    <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
+    <%= "#{object.value}%" if object.value %>
+  <% end %>
 <% end %>