Ensure dark colors are always used in tutorial hero. (#760) (#763)

Since this component is meant to always be rendered with a dark color
scheme regardless of the user chosen setting, there may be some elements
(like asides) that may look broken in light mode since they are trying
to use light color scheme colors on the dark background.

Resolves: rdar://118359891

Author: mportiz08

src/components/Tutorial/Hero.vue

@@ -193,6 +193,20 @@ export default {
   background-color: var(--color-tutorial-hero-background);
   color: var(--color-tutorial-hero-text);
   position: relative;
+
+  &.dark {
+    @media screen {
+      // ensure dark colors are always used, regardless of the selected
+      // light/dark/auto color scheme preference
+      //
+      // unfortunately the order of the property declaration matters here due
+      // to the way that some properties refer to others, which is why both the
+      // light and the dark vars are included here, even though the dark ones
+      // override the light ones...
+      @include color-vars-light;
+      @include color-vars-dark;
+    }
+  }
 }
 
 .bg {