diff --git a/browser/base/content/aboutaccounts/aboutaccounts.xhtml b/browser/base/content/aboutaccounts/aboutaccounts.xhtml
index 3f46162e84c3..81e4f1273d85 100644
--- a/browser/base/content/aboutaccounts/aboutaccounts.xhtml
+++ b/browser/base/content/aboutaccounts/aboutaccounts.xhtml
@@ -42,7 +42,7 @@
         </header>
 
         <section>
-            <img class="graphic graphic-sync-intro" src="chrome://browser/skin/fxa/sync-illustration.svg#blueFill"/>
+            <img class="graphic graphic-sync-intro" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
 
             <div class="button-row">
               <button id="buttonOpenPrefs" class="button" href="#" tabindex="0">&aboutAccountsConfig.syncPreferences.label;</button>
@@ -56,7 +56,7 @@
         </header>
 
         <section>
-            <img class="graphic graphic-sync-intro" src="chrome://browser/skin/fxa/sync-illustration.svg#blueFill"/>
+            <img class="graphic graphic-sync-intro" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
             <div class="description">&aboutAccountsConfig.description;</div>
 
             <div class="button-row">
@@ -71,7 +71,7 @@
         </header>
 
         <section>
-            <img class="graphic graphic-sync-intro" src="chrome://browser/skin/fxa/sync-illustration.svg#blueFill"/>
+            <img class="graphic graphic-sync-intro" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
             <div class="description">&aboutAccounts.noConnection.description;</div>
 
             <div class="button-row">
@@ -86,7 +86,7 @@
         </header>
 
         <section>
-            <img class="graphic graphic-sync-intro" src="chrome://browser/skin/fxa/sync-illustration.svg#blueFill"/>
+            <img class="graphic graphic-sync-intro" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
             <div class="description">&aboutAccounts.badConfig.description;</div>
 
         </section>
diff --git a/browser/base/content/aboutaccounts/main.css b/browser/base/content/aboutaccounts/main.css
index 2abb60f40d1a..a5d2db9bd57c 100644
--- a/browser/base/content/aboutaccounts/main.css
+++ b/browser/base/content/aboutaccounts/main.css
@@ -118,6 +118,8 @@ header h1
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
+  -moz-context-properties: fill;
+  fill: #bfcbd3;
 }
 
 .description,
diff --git a/browser/components/preferences/in-content-old/sync.xul b/browser/components/preferences/in-content-old/sync.xul
index ad11fee817d4..1eb421677eae 100755
--- a/browser/components/preferences/in-content-old/sync.xul
+++ b/browser/components/preferences/in-content-old/sync.xul
@@ -60,7 +60,7 @@
         </groupbox>
       </vbox>
       <vbox>
-        <html:img class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg#blueFill"/>
+        <html:img class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
       </vbox>
     </hbox>
     <label class="fxaMobilePromo">
@@ -178,7 +178,7 @@
         </groupbox>
       </vbox>
       <vbox>
-        <html:img  class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg#blueFill"/>
+        <html:img  class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
       </vbox>
     </hbox>
     <groupbox>
diff --git a/browser/components/preferences/in-content/sync.xul b/browser/components/preferences/in-content/sync.xul
index 5ce88b1cceff..c69afa4994aa 100755
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -59,7 +59,7 @@
         </groupbox>
       </vbox>
       <vbox>
-        <html:img class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg#blueFill"/>
+        <html:img class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
       </vbox>
     </hbox>
     <label class="fxaMobilePromo">
@@ -178,7 +178,7 @@
         </groupbox>
       </vbox>
       <vbox>
-        <html:img  class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg#blueFill"/>
+        <html:img  class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
       </vbox>
     </hbox>
     <groupbox>
diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css
index af75e56e53f9..239412fcf5d9 100644
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -817,6 +817,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 .fxaSyncIllustration {
   width: 180px;
   height: var(--panel-ui-sync-illustration-height);
+  -moz-context-properties: fill;
+  fill: #cdcdcd;
 }
 
 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
diff --git a/browser/themes/shared/fxa/sync-illustration.svg b/browser/themes/shared/fxa/sync-illustration.svg
index 75f6afb87a51..fb0d2726fe23 100755
--- a/browser/themes/shared/fxa/sync-illustration.svg
+++ b/browser/themes/shared/fxa/sync-illustration.svg
@@ -1,30 +1,15 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 320 280" xmlns:xlink="http://www.w3.org/1999/xlink" >
-<style>
-	#blueFill:target ~ use,
-	#blueFill:target ~ g {
-		fill: #bfcbd3;
-	}
-
-	svg {
-		fill:#cdcdcd;
-	}
-</style>
-<defs>
-    <g id="logo">
-        <path d="M46.352,148.919 L46.352,148.919 L44.938,150.333 L43.523,148.919 L43.523,148.919 L37.866,143.262 L39.281,141.848 L44.938,147.505 L50.594,141.848 L52.009,143.262 L46.352,148.919 ZM43.937,134.000 L45.938,134.000 L45.938,142.000 L43.937,142.000 L43.937,134.000 ZM43.937,122.000 L45.938,122.000 L45.938,130.000 L43.937,130.000 L43.937,122.000 Z"/>
-        <path d="M306.641,132.110 L300.984,126.453 L295.328,132.110 L293.913,130.696 L300.984,123.625 L308.055,130.696 L306.641,132.110 ZM302.000,223.969 L300.000,223.969 L300.000,215.969 L302.000,215.969 L302.000,223.969 ZM302.000,211.969 L300.000,211.969 L300.000,203.969 L302.000,203.969 L302.000,211.969 ZM302.000,199.969 L300.000,199.969 L300.000,191.969 L302.000,191.969 L302.000,199.969 ZM302.000,187.969 L300.000,187.969 L300.000,179.969 L302.000,179.969 L302.000,187.969 ZM302.000,175.969 L300.000,175.969 L300.000,167.969 L302.000,167.969 L302.000,175.969 ZM302.000,163.969 L300.000,163.969 L300.000,155.969 L302.000,155.969 L302.000,163.969 ZM300.000,131.969 L302.000,131.969 L302.000,139.969 L300.000,139.969 L300.000,131.969 ZM302.000,151.969 L300.000,151.969 L300.000,143.969 L302.000,143.969 L302.000,151.969 ZM300.000,227.969 L302.000,227.969 L302.000,232.000 L302.000,234.000 L300.000,234.000 L292.000,234.000 L292.000,232.000 L300.000,232.000 L300.000,227.969 Z"/>
-        <path d="M101.335,236.009 L99.921,234.594 L105.578,228.938 L99.921,223.281 L101.335,221.866 L108.406,228.938 L101.335,236.009 ZM100.000,229.938 L92.000,229.938 L92.000,227.937 L100.000,227.937 L100.000,229.938 ZM80.000,227.937 L88.000,227.937 L88.000,229.938 L80.000,229.938 L80.000,227.937 Z"/>
-        <path d="M182.000,54.000 L182.000,52.000 L190.000,52.000 L190.000,54.000 L182.000,54.000 ZM170.000,52.000 L178.000,52.000 L178.000,54.000 L170.000,54.000 L170.000,52.000 ZM168.488,60.071 L161.417,53.000 L168.488,45.929 L169.902,47.343 L164.245,53.000 L169.902,58.657 L168.488,60.071 Z"/>
-        <path d="M297.688,276.000 L102.312,276.000 C97.721,276.000 94.000,272.279 94.000,267.688 L94.000,260.000 L306.000,260.000 L306.000,267.688 C306.000,272.279 302.279,276.000 297.688,276.000 ZM117.906,150.312 C117.906,145.721 121.628,142.000 126.218,142.000 L273.688,142.000 C278.279,142.000 282.000,145.721 282.000,150.312 L282.000,256.000 L117.906,256.000 L117.906,150.312 ZM132.000,242.000 L270.000,242.000 L270.000,156.000 L132.000,156.000 L132.000,242.000 Z"/>
-        <path d="M307.074,115.969 L206.926,115.969 C203.101,115.969 200.000,112.868 200.000,109.042 L200.000,38.926 C200.000,35.101 203.101,32.000 206.926,32.000 L307.074,32.000 C310.899,32.000 314.000,35.101 314.000,38.926 L314.000,109.042 C314.000,112.868 310.899,115.969 307.074,115.969 ZM210.000,65.875 C210.000,64.770 209.105,63.875 208.000,63.875 C206.895,63.875 206.000,64.770 206.000,65.875 L206.000,82.000 C206.000,83.105 206.895,84.000 208.000,84.000 C209.105,84.000 210.000,83.105 210.000,82.000 L210.000,65.875 ZM302.000,42.000 L216.000,42.000 L216.000,106.000 L302.000,106.000 L302.000,42.000 Z"/>
-        <path d="M65.844,240.000 L26.156,240.000 C23.861,240.000 22.000,238.139 22.000,235.844 L22.000,162.156 C22.000,159.861 23.861,158.000 26.156,158.000 L65.844,158.000 C68.139,158.000 70.000,159.861 70.000,162.156 L70.000,235.844 C70.000,238.139 68.139,240.000 65.844,240.000 ZM46.000,236.000 C48.287,236.000 50.141,234.195 50.141,231.969 C50.141,229.742 48.287,227.938 46.000,227.938 C43.713,227.938 41.859,229.742 41.859,231.969 C41.859,234.195 43.713,236.000 46.000,236.000 ZM66.000,168.000 L26.000,168.000 L26.000,224.000 L66.000,224.000 L66.000,168.000 Z"/>
-        <path d="M171.906,86.156 C171.906,102.329 159.026,115.469 143.017,115.797 L143.039,115.955 L28.850,115.955 L28.869,115.797 C12.872,115.475 -0.000,102.333 -0.000,86.156 C-0.000,71.661 10.336,59.603 23.994,57.019 C23.620,55.457 23.401,53.834 23.401,52.156 C23.401,40.714 32.606,31.438 43.962,31.438 C47.561,31.438 50.941,32.375 53.884,34.012 C53.883,33.930 53.878,33.848 53.878,33.766 C53.878,17.137 67.301,3.656 83.858,3.656 C97.763,3.656 109.453,13.164 112.843,26.059 C116.677,23.334 121.343,21.719 126.393,21.719 C139.394,21.719 149.933,32.331 149.933,45.422 C149.933,49.572 148.868,53.468 147.007,56.861 C161.114,59.082 171.906,71.351 171.906,86.156 Z"/>
-    </g>
-</defs>
-<g id="blueFill"></g>
-<use xlink:href="#logo" />
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 320 280" preserveAspectRatio="xMidYMid">
+  <path fill="context-fill" d="M46.352,148.919 L46.352,148.919 L44.938,150.333 L43.523,148.919 L43.523,148.919 L37.866,143.262 L39.281,141.848 L44.938,147.505 L50.594,141.848 L52.009,143.262 L46.352,148.919 ZM43.937,134.000 L45.938,134.000 L45.938,142.000 L43.937,142.000 L43.937,134.000 ZM43.937,122.000 L45.938,122.000 L45.938,130.000 L43.937,130.000 L43.937,122.000 Z"/>
+  <path fill="context-fill" d="M306.641,132.110 L300.984,126.453 L295.328,132.110 L293.913,130.696 L300.984,123.625 L308.055,130.696 L306.641,132.110 ZM302.000,223.969 L300.000,223.969 L300.000,215.969 L302.000,215.969 L302.000,223.969 ZM302.000,211.969 L300.000,211.969 L300.000,203.969 L302.000,203.969 L302.000,211.969 ZM302.000,199.969 L300.000,199.969 L300.000,191.969 L302.000,191.969 L302.000,199.969 ZM302.000,187.969 L300.000,187.969 L300.000,179.969 L302.000,179.969 L302.000,187.969 ZM302.000,175.969 L300.000,175.969 L300.000,167.969 L302.000,167.969 L302.000,175.969 ZM302.000,163.969 L300.000,163.969 L300.000,155.969 L302.000,155.969 L302.000,163.969 ZM300.000,131.969 L302.000,131.969 L302.000,139.969 L300.000,139.969 L300.000,131.969 ZM302.000,151.969 L300.000,151.969 L300.000,143.969 L302.000,143.969 L302.000,151.969 ZM300.000,227.969 L302.000,227.969 L302.000,232.000 L302.000,234.000 L300.000,234.000 L292.000,234.000 L292.000,232.000 L300.000,232.000 L300.000,227.969 Z"/>
+  <path fill="context-fill" d="M101.335,236.009 L99.921,234.594 L105.578,228.938 L99.921,223.281 L101.335,221.866 L108.406,228.938 L101.335,236.009 ZM100.000,229.938 L92.000,229.938 L92.000,227.937 L100.000,227.937 L100.000,229.938 ZM80.000,227.937 L88.000,227.937 L88.000,229.938 L80.000,229.938 L80.000,227.937 Z"/>
+  <path fill="context-fill" d="M182.000,54.000 L182.000,52.000 L190.000,52.000 L190.000,54.000 L182.000,54.000 ZM170.000,52.000 L178.000,52.000 L178.000,54.000 L170.000,54.000 L170.000,52.000 ZM168.488,60.071 L161.417,53.000 L168.488,45.929 L169.902,47.343 L164.245,53.000 L169.902,58.657 L168.488,60.071 Z"/>
+  <path fill="context-fill" d="M297.688,276.000 L102.312,276.000 C97.721,276.000 94.000,272.279 94.000,267.688 L94.000,260.000 L306.000,260.000 L306.000,267.688 C306.000,272.279 302.279,276.000 297.688,276.000 ZM117.906,150.312 C117.906,145.721 121.628,142.000 126.218,142.000 L273.688,142.000 C278.279,142.000 282.000,145.721 282.000,150.312 L282.000,256.000 L117.906,256.000 L117.906,150.312 ZM132.000,242.000 L270.000,242.000 L270.000,156.000 L132.000,156.000 L132.000,242.000 Z"/>
+  <path fill="context-fill" d="M307.074,115.969 L206.926,115.969 C203.101,115.969 200.000,112.868 200.000,109.042 L200.000,38.926 C200.000,35.101 203.101,32.000 206.926,32.000 L307.074,32.000 C310.899,32.000 314.000,35.101 314.000,38.926 L314.000,109.042 C314.000,112.868 310.899,115.969 307.074,115.969 ZM210.000,65.875 C210.000,64.770 209.105,63.875 208.000,63.875 C206.895,63.875 206.000,64.770 206.000,65.875 L206.000,82.000 C206.000,83.105 206.895,84.000 208.000,84.000 C209.105,84.000 210.000,83.105 210.000,82.000 L210.000,65.875 ZM302.000,42.000 L216.000,42.000 L216.000,106.000 L302.000,106.000 L302.000,42.000 Z"/>
+  <path fill="context-fill" d="M65.844,240.000 L26.156,240.000 C23.861,240.000 22.000,238.139 22.000,235.844 L22.000,162.156 C22.000,159.861 23.861,158.000 26.156,158.000 L65.844,158.000 C68.139,158.000 70.000,159.861 70.000,162.156 L70.000,235.844 C70.000,238.139 68.139,240.000 65.844,240.000 ZM46.000,236.000 C48.287,236.000 50.141,234.195 50.141,231.969 C50.141,229.742 48.287,227.938 46.000,227.938 C43.713,227.938 41.859,229.742 41.859,231.969 C41.859,234.195 43.713,236.000 46.000,236.000 ZM66.000,168.000 L26.000,168.000 L26.000,224.000 L66.000,224.000 L66.000,168.000 Z"/>
+  <path fill="context-fill" d="M171.906,86.156 C171.906,102.329 159.026,115.469 143.017,115.797 L143.039,115.955 L28.850,115.955 L28.869,115.797 C12.872,115.475 -0.000,102.333 -0.000,86.156 C-0.000,71.661 10.336,59.603 23.994,57.019 C23.620,55.457 23.401,53.834 23.401,52.156 C23.401,40.714 32.606,31.438 43.962,31.438 C47.561,31.438 50.941,32.375 53.884,34.012 C53.883,33.930 53.878,33.848 53.878,33.766 C53.878,17.137 67.301,3.656 83.858,3.656 C97.763,3.656 109.453,13.164 112.843,26.059 C116.677,23.334 121.343,21.719 126.393,21.719 C139.394,21.719 149.933,32.331 149.933,45.422 C149.933,49.572 148.868,53.468 147.007,56.861 C161.114,59.082 171.906,71.351 171.906,86.156 Z"/>
 </svg>
+
diff --git a/browser/themes/shared/incontentprefs-old/preferences.inc.css b/browser/themes/shared/incontentprefs-old/preferences.inc.css
index 5c82303cf603..aacc2c067f6c 100644
--- a/browser/themes/shared/incontentprefs-old/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs-old/preferences.inc.css
@@ -440,6 +440,9 @@ description > html|a {
 
 .fxaSyncIllustration {
   margin-top: 35px;
+  width: 231px;
+  -moz-context-properties: fill;
+  fill: #bfcbd3;
 }
 
 #syncOptions caption {
@@ -495,10 +498,6 @@ description > html|a {
   color: var(--in-content-link-color);
 }
 
-.fxaSyncIllustration {
-  width: 231px;
-}
-
 #fxaLoginStatus[hasName] #fxaEmailAddress1 {
   font-size: 1.1rem;
 }
diff --git a/browser/themes/shared/incontentprefs/preferences.inc.css b/browser/themes/shared/incontentprefs/preferences.inc.css
index 6e86c6721a39..d30dde796291 100644
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -443,6 +443,9 @@ description > html|a {
 
 .fxaSyncIllustration {
   margin-top: 35px;
+  width: 231px;
+  -moz-context-properties: fill;
+  fill: #bfcbd3;
 }
 
 #syncOptions caption {
@@ -498,10 +501,6 @@ description > html|a {
   color: var(--in-content-link-color);
 }
 
-.fxaSyncIllustration {
-  width: 231px;
-}
-
 #fxaLoginStatus[hasName] #fxaEmailAddress1 {
   font-size: 1.1rem;
 }