--- a/browser/base/content/test/static/browser_parsable_css.js
+++ b/browser/base/content/test/static/browser_parsable_css.js
@@ -121,16 +121,20 @@ let propNameWhitelist = [
    isFromDevTools: false},
 
   // These properties *are* actually referenced. Need to find why
   // their reference isn't getting counted.
   {propName: "--bezier-diagonal-color",
    isFromDevTools: true},
   {propName: "--bezier-grid-color",
    isFromDevTools: true},
+
+  // Bug 1476322 - Doesn't parse CSSKeyframeRules
+  {propName: "--tracking-protection-shield-color",
+   isFromDevTools: false},
 ];
 
 // Add suffix to stylesheets' URI so that we always load them here and
 // have them parsed. Add a random number so that even if we run this
 // test multiple times, it would be unlikely to affect each other.
 const kPathSuffix = "?always-parse-css-" + Math.random();
 
 function dumpWhitelistItem(item) {

--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -210,32 +210,40 @@
   list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon-box {
   visibility: collapse;
 }
 
+#tracking-protection-icon-animatable-image {
+  --tracking-protection-shield-color: #7f00d6;
+}
+
+:root[lwt-toolbar-field-brighttext] #tracking-protection-icon-animatable-image {
+  --tracking-protection-shield-color: #c069ff;
+}
+
 @keyframes tp-icon-animation {
   from {
     transform: translateX(0);
     fill-opacity: 0.3;
   }
   38% {
     fill: inherit;
     fill-opacity: 0.3;
   }
   39% {
-    fill: #7f00d6;
+    fill: var(--tracking-protection-shield-color);
     fill-opacity: 1;
   }
   75% {
     transform: translateX(-1232px);
-    fill: #7f00d6;
+    fill: var(--tracking-protection-shield-color);
     fill-opacity: 1;
   }
   to {
     fill: inherit;
     fill-opacity: inherit;
   }
 }
 
@@ -244,22 +252,22 @@
     transform: scaleX(-1) translateX(0);
     fill-opacity: 0.3;
   }
   38% {
     fill: inherit;
     fill-opacity: 0.3;
   }
   39% {
-    fill: #7f00d6;
+    fill: var(--tracking-protection-shield-color);
     fill-opacity: 1;
   }
   75% {
     transform: scaleX(-1) translateX(-1232px);
-    fill: #7f00d6;
+    fill: var(--tracking-protection-shield-color);
     fill-opacity: 1;
   }
   to {
     fill: inherit;
     fill-opacity: inherit;
   }
 }