diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index 6817be7a4..d4fbf61bb 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -79,64 +79,63 @@
   --ui-header-subtler: #{color(ui-cool-gray, 700)};
 }
 
-// NOTE:  dark mode is disabled for now.
 // Dark Mode
-// @media (prefers-color-scheme: dark) {
-//   :root {
-//     // poles
-//     --subtle: #{darken(color(ui-gray, 900), 2%)};
-//     --stark: var(--white);
-//     --stark-components: 255, 255, 255;
-//
-//     // theme colors
-//     --info-subtler-3: #{color(blue, 800)};
-//     --info-subtler-2: #{color(blue, 700)};
-//     --info-subtler-1: #{color(blue, 600)};
-//     --info: #{color(blue)};
-//     --info-starker-1: #{color(blue, 300)};
-//     --info-starker-2: #{color(blue, 200)};
-//
-//     --alert-subtler-2: #{color(orange, 900)};
-//     --alert-subtler-1: #{color(orange, 800)};
-//     --alert: #{color(orange)};
-//     --alert-starker-1: #{color(orange, 200)};
-//
-//     --warning-subtler-2: #{color(yellow, 900)};
-//     --warning-subtler-1: #{color(yellow, 800)};
-//     --warning: #{color(yellow)};
-//     --warning-starker-1: #{color(yellow, 200)};
-//
-//     --failure-subtler-2: #{color(red, 900)};
-//     --failure-subtler-1: #{color(red, 800)};
-//     --failure: #{lighten(color(red, 400), 2.5%)};
-//     --failure-starker-1: #{color(red, 300)};
-//
-//     --success-subtler-2: #{color(green, 900)};
-//     --success-subtler-1: #{color(green, 800)};
-//     --success: #{color(green)};
-//     --success-starker-1: #{color(green, 200)};
-//
-//     --action-subtler-2: #{color(blue, 900)};
-//     --action-subtler-1h: #{color(blue, 800)};
-//     --action-subtler-1: #{color(blue, 800)};
-//     --action: #{color(blue, 300)};
-//     --action-starker-1: #{color(blue, 200)};
-//
-//     --ui-border-subtler-1: #{color(ui-gray, 800)};
-//     --ui-border: #{color(ui-gray, 700)};
-//
-//     --ui-gray-subtler-6: #{color(ui-gray, 900)};
-//     --ui-gray-subtler-5: #{color(ui-gray, 800)};
-//     --ui-gray-subtler-4: #{color(ui-gray, 700)};
-//     --ui-gray-subtler-3: #{color(ui-gray, 600)};
-//     --ui-gray-subtler-2: #{color(ui-gray, 500)};
-//     --ui-gray-subtler-1: #{color(ui-gray, 400)};
-//     --ui-gray: #{color(ui-gray, 300)};
-//     --ui-gray-starker-1: #{color(ui-gray, 200)};
-//     --ui-gray-starker-2: #{color(ui-gray, 100)};
-//     --ui-gray-starker-3: #{color(ui-gray, 050)};
-//     --ui-gray-starker-4: #{color(ui-gray, 010)};
-//
-//     --ui-header-subtler: #{color(ui-cool-gray, 100)};
-//   }
-// }
+@media (prefers-color-scheme: dark) {
+  :root {
+    // poles
+    --subtle: #{darken(color(ui-gray, 900), 2%)};
+    --stark: var(--white);
+    --stark-components: 255, 255, 255;
+
+    // theme colors
+    --info-subtler-3: #{color(blue, 800)};
+    --info-subtler-2: #{color(blue, 700)};
+    --info-subtler-1: #{color(blue, 600)};
+    --info: #{color(blue)};
+    --info-starker-1: #{color(blue, 300)};
+    --info-starker-2: #{color(blue, 200)};
+
+    --alert-subtler-2: #{color(orange, 900)};
+    --alert-subtler-1: #{color(orange, 800)};
+    --alert: #{color(orange)};
+    --alert-starker-1: #{color(orange, 200)};
+
+    --warning-subtler-2: #{color(yellow, 900)};
+    --warning-subtler-1: #{color(yellow, 800)};
+    --warning: #{color(yellow)};
+    --warning-starker-1: #{color(yellow, 200)};
+
+    --failure-subtler-2: #{color(red, 900)};
+    --failure-subtler-1: #{color(red, 800)};
+    --failure: #{lighten(color(red, 400), 2.5%)};
+    --failure-starker-1: #{color(red, 300)};
+
+    --success-subtler-2: #{color(green, 900)};
+    --success-subtler-1: #{color(green, 800)};
+    --success: #{color(green)};
+    --success-starker-1: #{color(green, 200)};
+
+    --action-subtler-2: #{color(blue, 900)};
+    --action-subtler-1h: #{color(blue, 800)};
+    --action-subtler-1: #{color(blue, 800)};
+    --action: #{color(blue, 300)};
+    --action-starker-1: #{color(blue, 200)};
+
+    --ui-border-subtler-1: #{color(ui-gray, 800)};
+    --ui-border: #{color(ui-gray, 700)};
+
+    --ui-gray-subtler-6: #{color(ui-gray, 900)};
+    --ui-gray-subtler-5: #{color(ui-gray, 800)};
+    --ui-gray-subtler-4: #{color(ui-gray, 700)};
+    --ui-gray-subtler-3: #{color(ui-gray, 600)};
+    --ui-gray-subtler-2: #{color(ui-gray, 500)};
+    --ui-gray-subtler-1: #{color(ui-gray, 400)};
+    --ui-gray: #{color(ui-gray, 300)};
+    --ui-gray-starker-1: #{color(ui-gray, 200)};
+    --ui-gray-starker-2: #{color(ui-gray, 100)};
+    --ui-gray-starker-3: #{color(ui-gray, 050)};
+    --ui-gray-starker-4: #{color(ui-gray, 010)};
+
+    --ui-header-subtler: #{color(ui-cool-gray, 100)};
+  }
+}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 9e72b055f..3acf2edab 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -68,7 +68,7 @@
       right: 0;
       height: 3px;
 
-      background: repeating-linear-gradient(to right, #fff, #fff, var(--info), #fff, #fff);
+      background: repeating-linear-gradient(to right, var(--subtle), var(--subtle), var(--info), var(--subtle), var(--subtle));
       background-size: 200% auto;
       background-position: 0 100%;
       animation: gradient 1s linear infinite;