diff --git a/browser/components/aboutlogins/content/aboutLogins.css b/browser/components/aboutlogins/content/aboutLogins.css
index 79d46c336cc9..e3528ca49b84 100644
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -77,7 +77,7 @@ login-item {
   fill: #20123a;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (-moz-toolbar-prefers-color-scheme: dark) {
   #branding-logo {
     fill: #fff;
   }
diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css
index 7d244daa74e7..2dc86d1bb6b3 100644
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -13,13 +13,13 @@
 }
 
 /* Only overwrite the deemphasized text color in non-dark mode. */
-@media not (prefers-color-scheme: dark) {
+@media not (-moz-toolbar-prefers-color-scheme: dark) {
   :host {
     --in-content-deemphasized-text: #737373;
   }
 }
 
-@media (prefers-color-scheme: dark) {
+@media (-moz-toolbar-prefers-color-scheme: dark) {
   :host {
     --reveal-checkbox-opacity: .8;
     --reveal-checkbox-opacity-hover: 1;