diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index aa3c127..0c988fb 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -29,6 +29,21 @@
   }
 }
 /** Compatibility Fixes *******************************************************/
+/*= Color - Compatibility ====================================================*/
+:root {
+  /* Compatibility for accent color
+     https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
+  */
+  --uc-accent-color: AccentColor;
+  --uc-accent-text-color: AccentColorText;
+}
+@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
+  :root {
+    --uc-accent-color: -moz-accent-color;
+    --uc-accent-text-color: AccentColorText;
+  }
+}
+
 /*= Theme - Compatibility ====================================================*/
 @supports -moz-bool-pref("userChrome.compatibility.theme") {
   /*= Hotfix #98 ===============================================================*/
@@ -146,7 +161,7 @@
     }
     @media (-moz-windows-accent-color-in-titlebar) {
       :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox {
-        border-top-color: -moz-accent-color !important;
+        border-top-color: var(--uc-accent-color) !important;
       }
     }
   }
@@ -351,14 +366,14 @@
     /* URL Bar */
     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
-      --focus-outline-color: -moz-accent-color !important;
+      --focus-outline-color: var(--uc-accent-color) !important;
     }
 
     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
       #urlbar[open]
       > #urlbar-background {
-      border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important;
+      border-color: color-mix(in srgb, var(--uc-accent-color) 50%, transparent) !important;
       /* Like: --toolbar-field-focus-border-color */
     }
   }
@@ -418,11 +433,11 @@
       --win-shorcut-text-color: #757575;
       --win-error-color: #b31616;
       --win-red-border-color: #ff4343;
-      --win-accent-forground-color: -moz-accent-color-foreground;
-      --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
-      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
-      --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;
+      --win-accent-forground-color: var(--uc-accent-text-color);
+      --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, var(--uc-accent-color));
+      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, var(--uc-accent-color));
+      --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, var(--uc-accent-color));
+      --win-accent-active-color: var(--uc-accent-color);
     }
 
     @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@@ -450,10 +465,10 @@
         --win-shorcut-text-color: #adadad;
         --win-error-color: #ffb900;
         --win-red-border-color: #ff4343;
-        --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
-        --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
-        --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
-        --win-accent-active-color: -moz-accent-color;
+        --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, var(--uc-accent-color));
+        --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, var(--uc-accent-color));
+        --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, var(--uc-accent-color));
+        --win-accent-active-color: var(--uc-accent-color);
       }
     }
     :root:not(:-moz-lwtheme),
@@ -704,20 +719,20 @@
     /* Tab Bar */
     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
-      color: -moz-accent-color-foreground;
-      background-color: -moz-accent-color;
+      color: var(--uc-accent-text-color);
+      background-color: var(--uc-accent-color);
     }
     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
       --toolbarbutton-icon-fill: currentColor;
-      --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
-      --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
+      --toolbarbutton-hover-background: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent);
+      --toolbarbutton-active-background: color-mix(in srgb, var(var(--uc-accent-text-color)) 15%, transparent);
     }
   }
   /*= GTK - URL View url accent color ==========================================*/
   @media (-moz-gtk-csd-available) {
     :root:not(:-moz-lwtheme) .urlbarView-url {
-      --urlbar-popup-url-color: -moz-accent-color;
+      --urlbar-popup-url-color: var(--uc-accent-color);
     }
 
     /* Nightly Compatibility */
@@ -743,14 +758,14 @@
       --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
       --mac-hover-bgcolor: Window;
       --mac-disabled-bgcolor: transparent;
-      --mac-primary-button-color: -moz-accent-color-foreground;
+      --mac-primary-button-color: var(--uc-accent-text-color);
       /* or -moz-mac-menutextselect */
-      --mac-accent-color: -moz-accent-color;
+      --mac-accent-color: var(--uc-accent-color);
       /* or LinkText */
-      --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
-      --mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, -moz-accent-color);
+      --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, var(--uc-accent-color));
+      --mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, var(--uc-accent-color));
       /* or -moz-mac-menuselect, Highlight */
-      --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color);
+      --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, var(--uc-accent-color));
       /* or ActiveBorder */
       /* Text, Icon Color */
       --menu-color: var(--mac-text-color) !important;
@@ -1356,9 +1371,9 @@
 
   .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
   body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
-    border-color: -moz-accent-color !important;
+    border-color: var(--uc-accent-color) !important;
     /* Hard Coded */
-    outline-color: -moz-accent-color !important;
+    outline-color: var(--uc-accent-color) !important;
   }
 
   /*= PopupAutoComplete ========================================================*/
@@ -1715,9 +1730,9 @@
     .checkbox-check[checked] {
       -moz-context-properties: fill !important;
       fill: currentColor !important;
-      color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+      color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
       border-color: var(--checkbox-checked-border-color, transparent) !important;
-      background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
+      background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important;
       background-image: url("chrome://global/skin/icons/check.svg") !important;
       background-position: center !important;
       background-repeat: no-repeat !important;
@@ -1728,48 +1743,48 @@
     checkbox:not([disabled="true"]):hover > .checkbox-check {
       background-color: var(
         --checkbox-unchecked-hover-bgcolor,
-        color-mix(in srgb, -moz-accent-color 4%, Field)
+        color-mix(in srgb, var(--uc-accent-color) 4%, Field)
       ) !important;
     }
     checkbox:not([disabled="true"]):hover:active > .checkbox-check {
       background-color: var(
         --checkbox-unchecked-active-bgcolor,
-        color-mix(in srgb, -moz-accent-color 8%, Field)
+        color-mix(in srgb, var(--uc-accent-color) 8%, Field)
       ) !important;
     }
     checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
       background-color: var(
         --checkbox-checked-hover-bgcolor,
-        color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
+        color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color))
       ) !important;
     }
     checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
       background-color: var(
         --checkbox-checked-active-bgcolor,
-        color-mix(in srgb, currentColor 25%, -moz-accent-color)
+        color-mix(in srgb, currentColor 25%, var(--uc-accent-color))
       ) !important;
     }
 
     checkbox:-moz-focusring > .checkbox-check {
-      outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+      outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
       outline-offset: var(--focus-outline-offset, 2px) !important;
     }
 
     @media (prefers-contrast) {
       checkbox:not([disabled="true"]):hover > .checkbox-check {
         /* color will set the border-color on the check due to how HCM works for in-content pages. */
-        color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
+        color: var(--checkbox-checked-border-color, color-mix(in srgb, var(--uc-accent-color) 4%, Field)) !important;
       }
 
       .checkbox-check[checked] {
         color: var(--checkbox-checked-border-color, currentColor) !important;
-        fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+        fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
       }
 
       checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked],
       checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] {
-        color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
-        fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+        color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
+        fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
       }
     }
     .checkbox-icon[src] {
@@ -1815,7 +1830,7 @@
       background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
     }
     xul|menulist:-moz-focusring {
-      outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+      outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
       outline-offset: var(--focus-outline-offset, 2px) !important;
     }
 
@@ -2681,14 +2696,14 @@
 
     .sidebar-panel:not([lwt-sidebar]) #search-box:hover,
     body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
-      border-color: -moz-accent-color !important;
+      border-color: var(--uc-accent-color) !important;
     }
 
     /* Others */
     #editBMPanel_namePicker:hover,
     #editBMPanel_tagsField:hover,
     .findbar-container .findbar-textbox:hover {
-      --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
+      --input-border-color: color-mix(in srgb, var(--focus-outline-color, var(--uc-accent-color)) 50%, transparent);
     }
   }
   /*= Downloads Panel ========================================================*/
@@ -4535,13 +4550,13 @@
   @media (-moz-windows-accent-color-in-titlebar) {
     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
-      fill: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) !important;
+      fill: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent) !important;
       /* Hardcorded for compatibility */
     }
 
     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
-      fill: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) !important;
+      fill: color-mix(in srgb, var(--uc-accent-text-color) 15%, transparent) !important;
       /* Hardcorded for compatibility */
     }
   }
diff --git a/css/leptonContent.css b/css/leptonContent.css
index b346bde..30cd564 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -539,6 +539,20 @@
 /** Fully Dark Mode ***********************************************************/
 /*= Fully Dark Mode - Dark Mode Colors =======================================*/
 @supports -moz-bool-pref("userContent.page.proton_color") {
+  :root {
+    /* Compatibility for accent color
+       https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
+    */
+    --uc-accent-color: AccentColor;
+    --uc-accent-text-color: AccentColorText;
+  }
+  @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
+    :root {
+      --uc-accent-color: -moz-accent-color;
+      --uc-accent-text-color: AccentColorText;
+    }
+  }
+
   @-moz-document url-prefix("about:"),
                url-prefix("chrome://browser/content/places/places.xhtml"),
                url-prefix("https://addons.mozilla.org"),
@@ -751,7 +765,7 @@
     @supports -moz-bool-pref("userContent.page.proton_color.system_accent") {
       :host,
       :root {
-        --in-content-primary-button-text-color: -moz-accent-color-foreground !important;
+        --in-content-primary-button-text-color: var(--uc-accent-text-color) !important;
         --in-content-primary-button-background: Highlight !important;
         --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
         --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
@@ -2763,9 +2777,9 @@
         menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
           -moz-context-properties: fill !important;
           fill: currentColor !important;
-          color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+          color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
           border-color: var(--checkbox-checked-border-color, transparent) !important;
-          background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
+          background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important;
           background-image: url("chrome://global/skin/icons/check.svg") !important;
           background-position: center !important;
           background-repeat: no-repeat !important;
@@ -2775,19 +2789,19 @@
         menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
           background-color: var(
             --checkbox-unchecked-hover-bgcolor,
-            color-mix(in srgb, -moz-accent-color 4%, Field)
+            color-mix(in srgb, var(--uc-accent-color) 4%, Field)
           ) !important;
         }
         menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
           background-color: var(
             --checkbox-unchecked-active-bgcolor,
-            color-mix(in srgb, -moz-accent-color 8%, Field)
+            color-mix(in srgb, var(--uc-accent-color) 8%, Field)
           ) !important;
         }
         menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
           background-color: var(
             --checkbox-checked-hover-bgcolor,
-            color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
+            color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color))
           ) !important;
         }
         menuitem[type="checkbox"]:not([disabled="true"]):hover:active
@@ -2795,21 +2809,24 @@
           > .menu-iconic-icon {
           background-color: var(
             --checkbox-checked-active-bgcolor,
-            color-mix(in srgb, currentColor 25%, -moz-accent-color)
+            color-mix(in srgb, currentColor 25%, var(--uc-accent-color))
           ) !important;
         }
         menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
-          outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+          outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
           outline-offset: var(--focus-outline-offset, 2px) !important;
         }
         @media (prefers-contrast) {
           menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon {
             /* color will set the border-color on the check due to how HCM works for in-content pages. */
-            color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
+            color: var(
+              --checkbox-checked-border-color,
+              color-mix(in srgb, var(--uc-accent-color) 4%, Field)
+            ) !important;
           }
           menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
             color: var(--checkbox-checked-border-color, currentColor) !important;
-            fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+            fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
           }
           menuitem[type="checkbox"]:not([disabled="true"]):hover:active
             > .menu-iconic-left[checked="true"]
@@ -2817,8 +2834,8 @@
           menuitem[type="checkbox"]:not([disabled="true"]):hover
             > .menu-iconic-left[checked="true"]
             > .menu-iconic-icon {
-            color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
-            fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+            color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
+            fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
           }
         }
         menuitem[type="checkbox"] > .menu-iconic-text {
diff --git a/src/compatibility/_accent_color.scss b/src/compatibility/_accent_color.scss
new file mode 100644
index 0000000..c3f6062
--- /dev/null
+++ b/src/compatibility/_accent_color.scss
@@ -0,0 +1,12 @@
+:root {
+  /* Compatibility for accent color
+     https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
+  */
+  --uc-accent-color: AccentColor;
+  --uc-accent-text-color: AccentColorText;
+
+  @include Option("userChrome.compatibility.accent_color") {
+    --uc-accent-color: -moz-accent-color;
+    --uc-accent-text-color: -moz-accent-color-foreground;
+  }
+}
diff --git a/src/compatibility/_index.scss b/src/compatibility/_index.scss
index bd8ee6c..e089775 100644
--- a/src/compatibility/_index.scss
+++ b/src/compatibility/_index.scss
@@ -1,3 +1,6 @@
+/*= Color - Compatibility ====================================================*/
+@import "accent_color";
+
 /*= Theme - Compatibility ====================================================*/
 @include Option("userChrome.compatibility.theme") {
   @import "theme";
diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss
index 26d8e87..1d6f863 100644
--- a/src/compatibility/_os.scss
+++ b/src/compatibility/_os.scss
@@ -10,7 +10,7 @@
 
     @media (-moz-windows-accent-color-in-titlebar) {
       #navigator-toolbox {
-        border-top-color: -moz-accent-color !important;
+        border-top-color: var(--uc-accent-color) !important;
       }
     }
   }
diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss
index 8db37ae..d605c70 100644
--- a/src/contents/_proton_color.scss
+++ b/src/contents/_proton_color.scss
@@ -19,7 +19,7 @@
 
   @include Option("userContent.page.proton_color.system_accent") {
     :host, :root {
-      --in-content-primary-button-text-color: -moz-accent-color-foreground !important;
+      --in-content-primary-button-text-color: var(--uc-accent-text-color) !important;
       --in-content-primary-button-background: Highlight !important;
       --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
       --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
diff --git a/src/decoration/_field_border.scss b/src/decoration/_field_border.scss
index 4d7983d..0b749f1 100644
--- a/src/decoration/_field_border.scss
+++ b/src/decoration/_field_border.scss
@@ -12,12 +12,12 @@ body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
 }
 .sidebar-panel:not([lwt-sidebar]) #search-box:hover,
 body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
-  border-color: -moz-accent-color !important;
+  border-color: var(--uc-accent-color) !important;
 }
 
 /* Others */
 #editBMPanel_namePicker:hover,
 #editBMPanel_tagsField:hover,
 .findbar-container .findbar-textbox:hover {
-  --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
+  --input-border-color: color-mix(in srgb, var(--focus-outline-color, var(--uc-accent-color)) 50%, transparent);
 }
diff --git a/src/leptonContent.scss b/src/leptonContent.scss
index cc96c6d..6609e27 100644
--- a/src/leptonContent.scss
+++ b/src/leptonContent.scss
@@ -22,6 +22,7 @@
 /** Fully Dark Mode ***********************************************************/
 /*= Fully Dark Mode - Dark Mode Colors =======================================*/
 @include Option("userContent.page.proton_color") {
+  @import "compatibility/accent_color";
   @import "contents/proton_color";
 }
 @include Option("userContent.page.dark_mode") {
diff --git a/src/tabbar/newtab_button/_looks_like_tab.scss b/src/tabbar/newtab_button/_looks_like_tab.scss
index 94a0f8e..150e12e 100644
--- a/src/tabbar/newtab_button/_looks_like_tab.scss
+++ b/src/tabbar/newtab_button/_looks_like_tab.scss
@@ -36,7 +36,7 @@
   :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
     fill: color-mix(
       in srgb,
-      -moz-accent-color-foreground 10%,
+      var(--uc-accent-text-color) 10%,
       transparent
     ) !important; /* Hardcorded for compatibility */
   }
@@ -44,7 +44,7 @@
   :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
     fill: color-mix(
       in srgb,
-      -moz-accent-color-foreground 15%,
+      var(--uc-accent-text-color) 15%,
       transparent
     ) !important; /* Hardcorded for compatibility */
   }
diff --git a/src/theme/_fully_color.scss b/src/theme/_fully_color.scss
index 94e98bc..7b2e6bf 100644
--- a/src/theme/_fully_color.scss
+++ b/src/theme/_fully_color.scss
@@ -155,8 +155,8 @@ body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] {
 }
 .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
 body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
-  border-color: -moz-accent-color !important; /* Hard Coded */
-  outline-color: -moz-accent-color !important;
+  border-color: var(--uc-accent-color) !important; /* Hard Coded */
+  outline-color: var(--uc-accent-color) !important;
 }
 
 /*= PopupAutoComplete ========================================================*/
diff --git a/src/theme/proton_chrome/_proton_commons.scss b/src/theme/proton_chrome/_proton_commons.scss
index a3c31e5..0f6bbfc 100644
--- a/src/theme/proton_chrome/_proton_commons.scss
+++ b/src/theme/proton_chrome/_proton_commons.scss
@@ -269,7 +269,7 @@
       background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
     }
     &:-moz-focusring {
-      outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+      outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
       outline-offset: var(--focus-outline-offset, 2px) !important;
     }
   }
diff --git a/src/theme/system_default_theme/_gtk.scss b/src/theme/system_default_theme/_gtk.scss
index 1fde085..7d2fbb8 100644
--- a/src/theme/system_default_theme/_gtk.scss
+++ b/src/theme/system_default_theme/_gtk.scss
@@ -1,7 +1,7 @@
 /*= GTK - URL View url accent color ==========================================*/
 @include OS($linux) {
   :root:not(:-moz-lwtheme) .urlbarView-url {
-    --urlbar-popup-url-color: -moz-accent-color;
+    --urlbar-popup-url-color: var(--uc-accent-color);
   }
 
   /* Nightly Compatibility */
diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss
index 17efe8c..d2228ee 100644
--- a/src/theme/system_default_theme/_mac.scss
+++ b/src/theme/system_default_theme/_mac.scss
@@ -12,15 +12,15 @@
     --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
     --mac-hover-bgcolor: Window;
     --mac-disabled-bgcolor: transparent;
-    --mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */
-    --mac-accent-color: -moz-accent-color; /* or LinkText */
-    --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
+    --mac-primary-button-color: var(--uc-accent-text-color); /* or -moz-mac-menutextselect */
+    --mac-accent-color: var(--uc-accent-color); /* or LinkText */
+    --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, var(--uc-accent-color));
     --mac-accent-hover-color: color-mix(
       in srgb,
       rgb(0, 0, 0) 10%,
-      -moz-accent-color
+      var(--uc-accent-color)
     ); /* or -moz-mac-menuselect, Highlight */
-    --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */
+    --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, var(--uc-accent-color)); /* or ActiveBorder */
 
     /* Text, Icon Color */
     --menu-color: var(--mac-text-color) !important;
diff --git a/src/theme/system_default_theme/_urlbar_focus_color.scss b/src/theme/system_default_theme/_urlbar_focus_color.scss
index a175e0e..f3c053b 100644
--- a/src/theme/system_default_theme/_urlbar_focus_color.scss
+++ b/src/theme/system_default_theme/_urlbar_focus_color.scss
@@ -7,14 +7,14 @@ $_urlBarFocusDarkSelector: ":root[tabsintitlebar][lwt-default-theme-in-dark-mode
   /* URL Bar */
   #{$_urlBarFocusSelector},
   #{$_urlBarFocusDarkSelector} {
-    --focus-outline-color: -moz-accent-color !important;
+    --focus-outline-color: var(--uc-accent-color) !important;
   }
 
   #{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background,
   #{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background {
     border-color: color-mix(
       in srgb,
-      -moz-accent-color 50%,
+      var(--uc-accent-color) 50%,
       transparent
     ) !important; /* Like: --toolbar-field-focus-border-color */
   }
diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss
index 508c5c3..2ec3798 100644
--- a/src/theme/system_default_theme/_win10.scss
+++ b/src/theme/system_default_theme/_win10.scss
@@ -21,11 +21,11 @@
     --win-shorcut-text-color: #757575;
     --win-error-color: #b31616;
     --win-red-border-color: #ff4343;
-    --win-accent-forground-color: -moz-accent-color-foreground;
-    --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
-    --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
-    --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;
+    --win-accent-forground-color: var(--uc-accent-text-color);
+    --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, var(--uc-accent-color));
+    --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, var(--uc-accent-color));
+    --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, var(--uc-accent-color));
+    --win-accent-active-color: var(--uc-accent-color);
   }
   @include Dark {
     #{system-default-theme()} {
@@ -49,10 +49,10 @@
       --win-shorcut-text-color: #adadad;
       --win-error-color: #ffb900;
       --win-red-border-color: #ff4343;
-      --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
-      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
-      --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
-      --win-accent-active-color: -moz-accent-color;
+      --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, var(--uc-accent-color));
+      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, var(--uc-accent-color));
+      --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, var(--uc-accent-color));
+      --win-accent-active-color: var(--uc-accent-color);
     }
   }
 
@@ -312,14 +312,14 @@
   :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
   :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
     .titlebar-color {
-      color: -moz-accent-color-foreground;
-      background-color: -moz-accent-color;
+      color: var(--uc-accent-text-color);
+      background-color: var(--uc-accent-color);
     }
 
     .toolbar-items {
       --toolbarbutton-icon-fill: currentColor;
-      --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
-      --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
+      --toolbarbutton-hover-background: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent);
+      --toolbarbutton-active-background: color-mix(in srgb, var(var(--uc-accent-text-color)) 15%, transparent);
     }
   }
 }
diff --git a/src/utils/_proton_elements.scss b/src/utils/_proton_elements.scss
index 04eb459..6ecb629 100644
--- a/src/utils/_proton_elements.scss
+++ b/src/utils/_proton_elements.scss
@@ -88,10 +88,10 @@
 @mixin CheckboxCheckedIcon {
   -moz-context-properties: fill !important;
   fill: currentColor !important;
-  color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+  color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
   border-color: var(--checkbox-checked-border-color, transparent) !important;
 
-  background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
+  background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important;
   background-image: url("chrome://global/skin/icons/check.svg") !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
@@ -103,48 +103,48 @@
 @mixin CheckboxIconHover {
   background-color: var(
     --checkbox-unchecked-hover-bgcolor,
-    color-mix(in srgb, -moz-accent-color 4%, Field)
+    color-mix(in srgb, var(--uc-accent-color) 4%, Field)
   ) !important;
 }
 
 @mixin CheckboxIconActive {
   background-color: var(
     --checkbox-unchecked-active-bgcolor,
-    color-mix(in srgb, -moz-accent-color 8%, Field)
+    color-mix(in srgb, var(--uc-accent-color) 8%, Field)
   ) !important;
 }
 
 @mixin CheckboxCheckedIconHover {
   background-color: var(
     --checkbox-checked-hover-bgcolor,
-    color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
+    color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color))
   ) !important;
 }
 
 @mixin CheckboxCheckedIconActive {
   background-color: var(
     --checkbox-checked-active-bgcolor,
-    color-mix(in srgb, currentColor 25%, -moz-accent-color)
+    color-mix(in srgb, currentColor 25%, var(--uc-accent-color))
   ) !important;
 }
 
 @mixin CheckboxIconHoverContrast {
   /* color will set the border-color on the check due to how HCM works for in-content pages. */
-  color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
+  color: var(--checkbox-checked-border-color, color-mix(in srgb, var(--uc-accent-color) 4%, Field)) !important;
 }
 
 @mixin CheckboxCheckedIconContrast {
   color: var(--checkbox-checked-border-color, currentColor) !important;
-  fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+  fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
 }
 
 @mixin CheckboxCheckedIconHoverContrast {
-  color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
-  fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+  color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
+  fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
 }
 
 @mixin CheckboxFocusRing {
-  outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+  outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
   outline-offset: var(--focus-outline-offset, 2px) !important;
 }
 
diff --git a/user.js b/user.js
index c7b58d0..4b71c76 100644
--- a/user.js
+++ b/user.js
@@ -57,6 +57,7 @@ user_pref("userChrome.tab.photon_like_contextline",   false);
 user_pref("userChrome.rounding.square_tab",           false);
 
 // == Theme Compatibility Settings =============================================
+// user_pref("userChrome.compatibility.accent_color",         true); // Firefox v103 Below
 // user_pref("userChrome.compatibility.covered_header_image", true);
 // user_pref("userChrome.compatibility.panel_cutoff",         true);
 // user_pref("userChrome.compatibility.navbar_top_border",    true);