Clean: SASS - Dark mixin

__tests__/darkmode.test.scss

@@ -0,0 +1,42 @@
+@use 'true' as *;
+@use "../src/utils/darkmode";
+
+@include test-module("Color scheme is dark [mx]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include darkmode.Dark {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+      @include expect {
+        @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  @include test("simple reversed") {
+    @include assert {
+      @include output {
+        body {
+          @include darkmode.Dark {
+            font-size: 16px;
+          }
+        }
+      }
+      @include expect {
+        @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+}

__tests__/option.test.scss

@@ -0,0 +1,23 @@
+@use 'true' as *;
+@use "../src/utils/option";
+
+@include test-module("If exist pref [mx]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include option.Option("userChrome.tab.photon") {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+      @include expect {
+        @supports -moz-bool-pref("userChrome.tab.photon") {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+}

src/contents/_dark_mode.scss

@@ -1,4 +1,4 @@
-@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+@include Dark {
   @import "dark_mode/addons_org";
   @import "dark_mode/support_org";
   @import "dark_mode/accounts_com";

src/library/_proton.scss

@@ -53,7 +53,7 @@
     --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
   }
 
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @include Dark {
     :root {
       --organizer-color: rgb(251, 251, 254);
       --organizer-deemphasized-color: rgb(191, 191, 201);

src/theme/_fully_dark.scss

@@ -16,7 +16,7 @@ browser[type="content"] > html {
     --menu-border-color: #cfcfd8;
     --menuitem-hover-background-color: #e0e0e6;
   }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @include Dark {
     :root {
       --menu-border-color: rgba(107, 107, 107, 0.3);
       --menu-color: #fbfbfe;

src/theme/proton_chrome/_proton_commons.scss

@@ -8,7 +8,7 @@
   url("chrome://browser/content/pageinfo/pageInfo.xhtml")
 {
   /*- Overwrite --------------------------------------------------------------*/
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @include Dark {
     :root {
       --in-content-page-background: #42414d;
     }

src/theme/system_default_theme/_mac.scss

@@ -149,7 +149,7 @@
 
     --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
   }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @include Dark {
     :root:not(:-moz-lwtheme),
     :root[lwt-default-theme-in-dark-mode] {
       --mac-field-bgcolor: Field;
@@ -206,7 +206,7 @@
     --sidebar-text-color: var(--mac-text-color) !important;
     /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */
   }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @include Dark {
     .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
       body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
       .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
@@ -224,7 +224,7 @@
 
   /*- Others -----------------------------------------------------------------*/
   /* For Overwrite */
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @include Dark {
     :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
       --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
     }

src/theme/system_default_theme/_win10.scss

@@ -25,7 +25,7 @@
     --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
     --win-accent-active-color: -moz-accent-color;
   }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @include Dark {
     :root:not(:-moz-lwtheme),
     :root[lwt-default-theme-in-dark-mode] {
       --win-text-color: #ffffff;
@@ -232,7 +232,7 @@
     --sidebar-text-color: var(--win-text-color) !important;
     --sidebar-border-color: var(--win-border-color) !important;
   }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @include Dark {
     .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
       body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
       .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */

src/userChrome.scss

@@ -1,5 +1,6 @@
 @use "utils/os" as *;
 @use "utils/option" as *;
+@use "utils/darkmode" as *;
 
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 @namespace html "http://www.w3.org/1999/xhtml";

src/userContent.scss

@@ -1,4 +1,5 @@
 @use "utils/os" as *;
+@use "utils/darkmode" as *;
 
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");

src/utils/_darkmode.scss

@@ -0,0 +1,6 @@
+@mixin Dark() {
+  // -moz-toolbar-prefers-color-scheme is removed at v95, #250
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    @content;
+  }
+}