refactor: convert themes to sass mixins and assign with both classes and media query

addons/rose/addon/styles/rose/variables/color/_css.scss

@@ -4,7 +4,7 @@
  */
 
 // Light Mode
-:root {
+@mixin light-mode {
   // absolutes
   --white: #{color(white)};
   --black: #{color(black)};
@@ -80,62 +80,76 @@
 }
 
 // Dark Mode
+@mixin dark-mode {
+  // poles
+  --subtle: var(--black);
+  --stark: #{color(ui-gray, 100)};
+  --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: #{color(red, 300)};
+  --failure-starker-1: #{color(red, 200)};
+
+  --success-subtler-2: #{color(green, 900)};
+  --success-subtler-1: #{color(green, 800)};
+  --success: #{color(green, 700)};
+  --success-starker-1: #{color(green, 400)};
+
+  --action-subtler-2: #{darken(color(blue, 900), 10%)};
+  --action-subtler-1h: #{darken(color(blue, 900), 5%)};
+  --action-subtler-1: #{color(blue, 800)};
+  --action: #{color(blue, 400)};
+  --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)};
+}
+
+// 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 {
-    // poles
-    --subtle: var(--black);
-    --stark: #{color(ui-gray, 100)};
-    --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: #{color(red, 300)};
-    --failure-starker-1: #{color(red, 200)};
-
-    --success-subtler-2: #{color(green, 900)};
-    --success-subtler-1: #{color(green, 800)};
-    --success: #{color(green, 700)};
-    --success-starker-1: #{color(green, 400)};
-
-    --action-subtler-2: #{darken(color(blue, 900), 10%)};
-    --action-subtler-1h: #{darken(color(blue, 900), 5%)};
-    --action-subtler-1: #{color(blue, 800)};
-    --action: #{color(blue, 400)};
-    --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)};
+  .ember-application {
+    @include dark-mode;
   }
 }
+
+.ember-application.rose-theme-dark {
+  @include dark-mode;
+}