[Bug] Inconsistency between background and border on the same element

[phoenixxbasit]

Prerequisites

• I searched for any existing report about this bug to avoid opening a duplicate.
• I can reproduce this bug in a new, unmodified web browser profile with Dark Reader installed as the only extension.
• I understand I need to use the Broken Website Report template if this bug I am reporting occurs on a single website.

Bug Description

I'm attempting to integrate dark mode functionality into an iframe, where I render emails. To achieve this, I'm injecting Dark Reader code into the HTML of the email template. The injected code includes:

<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.84/darkreader.min.js"></script>
<script>
  DarkReader.setFetchMethod(window.fetch);
  DarkReader.auto({
    brightness: 100,
    contrast: 130,
    grayscale: 0,
    sepia: 0
  });
</script>

This script adds Dark Reader functionalities, enabling dark mode within the iframe.

Website Address

Majority Of Email Templates

Steps To Reproduce

Just Add the above code to any email template html and it should work

Expected Behavior

The whole button should have the same color. We need to ensure consistency for a cohesive design.

Actual Behavior

The background color and border color, or outline color, do not match.

Screenshots

No response

Operating System

Linux Ubuntu

Web Browser name and version

FireFox 125.0.3 (64-bit)

Dark Reader version

Using DarkReader Library 4.9.84

Additional Context

No response