refactor: update component-specific dark mode styles to account for class toggle

addons/rose/addon/styles/rose/components/card/_link.scss

@@ -6,6 +6,24 @@
 $xxxs: sizing.rems(xxxs); // 2
 
 .rose-card-link {
+
+  --background-color-light: transparent;
+  --background-color-dark: var(--ui-gray-subtler-6);
+
+  --background-color: var(--background-color-light);
+  
+  .ember-application.rose-theme-light & {
+    --background-color: var(--background-color-light);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --background-color: var(--background-color-dark);
+  }
+
+  .ember-application.rose-theme-dark & {
+    --background-color: var(--background-color-dark);
+  }
+
   @include type.type(s);
   border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
   border-radius: sizing.rems(xxxs);
@@ -15,10 +33,7 @@ $xxxs: sizing.rems(xxxs); // 2
   margin: 0 sizing.rems(m) sizing.rems(m) 0;
   box-shadow: 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4)),
     0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4));
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--ui-gray-subtler-6);
-  }
+  background-color: var(--background-color);
 
   a {
     text-decoration: none;

addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@@ -3,10 +3,27 @@
 
 $xs: sizing.rems(xs); // 8
 $xxs: sizing.rems(xxs); // 4
-$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
-$chevronWhite: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
+$chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
+$chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
 
 .rose-dropdown {
+  --background-image-light: #{$chevron};
+  --background-image-dark: #{$chevronWhite};
+
+  --background-image: var(--background-image-light);
+
+  .ember-application.rose-theme-light & {
+    --background-image: var(--background-image-light);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --background-image: var(--background-image-dark);
+  }
+
+  .ember-application.rose-theme-dark & {
+    --background-image: var(--background-image-dark);
+  }
+
   position: relative;
   display: inline-block;
 
@@ -59,14 +76,10 @@ $chevronWhite: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23fffff
 
     &.show-caret {
       padding-right: sizing.rems(xl);
-      background-image: url($chevron);
+      background: var(--background-image);
       background-repeat: no-repeat;
       background-position: right sizing.rems(m) center;
       background-size: sizing.rems(m);
-
-      @media (prefers-color-scheme: dark) {
-        background-image: url($chevronWhite);
-      }
     }
 
     // Hide default twistie triangle

addons/rose/addon/styles/rose/components/header/_index.scss

@@ -9,15 +9,29 @@
 @import 'dropdown';
 
 .rose-header {
+
+  --box-shadow-light: none;
+  --box-shadow-dark: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1);
+
+  --box-shadow: var(--box-shadow-light);
+
+  .ember-application.rose-theme-light & {
+    --box-shadow: var(--box-shadow-light);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --box-shadow: var(--box-shadow-dark);
+  }
+
+  .ember-application.rose-theme-dark & {
+    --box-shadow: var(--box-shadow-dark);
+  }
+
   display: grid;
   grid-template-areas: 'brand nav utilities';
   grid-template-columns: 0.01fr auto 1fr;
   background: var(--black);
-  box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1);
-
-  @media (prefers-color-scheme: light) {
-    box-shadow: none;
-  }
+  box-shadow: var(--box-shadow);
 }
 
 @media (max-width: media.width(small)) {

addons/rose/addon/styles/rose/variables/_opacity.scss

@@ -4,7 +4,7 @@
  */
 
 // Light Mode
-:root {
+@mixin light-mode {
   --opacity-5: 0.025;
   --opacity-4: 0.05;
   --opacity-3: 0.1;
@@ -15,12 +15,26 @@
 // Dark Mode
 // Subtler opacities look better in dark mode, so these are halved compared to
 // light mode.
+@mixin dark-mode {
+  --opacity-5: 0.0125;
+  --opacity-4: 0.0125;
+  --opacity-3: 0.025;
+  --opacity-2: 0.025;
+  --opacity-1: 0.125;
+}
+
+// Light mode is the default, hence it is applied to `html` by default
+.ember-application,
+.ember-application.rose-theme-light {
+  @include light-mode;
+}
+
 @media (prefers-color-scheme: dark) {
-  :root {
-    --opacity-5: 0.0125;
-    --opacity-4: 0.0125;
-    --opacity-3: 0.025;
-    --opacity-2: 0.025;
-    --opacity-1: 0.125;
+  .ember-application {
+    @include dark-mode;
   }
 }
+
+.ember-application.rose-theme-dark {
+  @include dark-mode;
+}