Fix: Darkmode at Stable to Dev #250

`layout.css.prefers-color-scheme.content-override` at 95+
- 0: dark
- 1: light
- 2: OS (old behavior)
- 3: browser (the new default)

Unfortunately, there are limits.
- In Nightly
  - Works fine.
  - However, `-moz-toolbar-prefers-color-scheme: dark` should be removed as legacy.
- Stable to Dev
  - If the system is in dark mode, it is unconditionally dark mode.
  - However, if the system is used in dark mode, the browser theme will also use dark mode, so it is not a very big side effect.

user.js

@@ -20,9 +20,12 @@ user_pref("layout.css.backdrop-filter.enabled", true);
 // Restore Compact Mode - 89 Above
 user_pref("browser.compactmode.show", true);
 
-// about:home Search Bar
+// about:home Search Bar - 89 Above
 user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", false);
 
+// Browser Theme Based Scheme - Will be activate 95 Above
+// user_pref("layout.css.prefers-color-scheme.content-override", 3);
+
 // ** Useful Options ***********************************************************
 // Integrated calculator at urlbar
 user_pref("browser.urlbar.suggest.calculator", true);

userChrome.css

@@ -371,7 +371,7 @@
     --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
   }
 
-  @media (prefers-color-scheme: dark) {
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
     :host,
     :root {
       /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
@@ -505,7 +505,7 @@
       --menu-border-color: #cfcfd8;
       --menuitem-hover-background-color: #e0e0e6;
     }
-    @media (prefers-color-scheme: dark) {
+    @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
       :root {
         --menu-border-color: rgba(107, 107, 107, 0.3);
         --menu-color: #fbfbfe;
@@ -563,7 +563,7 @@
   /*= Downloads ==============================================================*/
   @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml")
   {
-    @media (prefers-color-scheme: dark) {
+    @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
       :root {
         --in-content-page-background: #42414d;
       }

userContent.css

@@ -40,7 +40,7 @@
       --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
     }
 
-    @media (prefers-color-scheme: dark) {
+    @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
       #root {
         /* Default Dark Mode */
         --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
@@ -334,7 +334,7 @@
     --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
   }
 
-  @media (prefers-color-scheme: dark) {
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
     :host,
     :root {
       /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */