diff --git a/src/components/TutorialsOverview/Hero.vue b/src/components/TutorialsOverview/Hero.vue
index 3e33b8446..d9b752438 100644
--- a/src/components/TutorialsOverview/Hero.vue
+++ b/src/components/TutorialsOverview/Hero.vue
@@ -75,6 +75,19 @@ export default {
 
 .hero {
   @include breakpoint-content;
+
+  @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;
+  }
+
   padding-bottom: rem(80px);
   padding-top: rem(80px);
 }