Speedreader: System theme checkmark renders badly on Linux

[rillian]

Description

When selecting "System Theme" on the new speedreader control header, the checkmark renders misaligned somehow, looking janky so it's hard to tell what's going on.

Steps to Reproduce

1. Visit page with speed reader enabled
2. Click "appearance" button
3. Click "sytem theme" black-and-white circle

Actual result:

Blue circle with a checkmark is drawn but comes out half-black/half-white:

I think maybe the logic that makes the checkmark dark on the light buttons and light on the dark button is confused by the alternating light-dark pattern of the system theme button?

Expected result:

Should overlay cleanly like on the other theme selectors:

Reproduces how often:

Always

Brave version (brave://version info)

1.58.101 Chromium: 116.0.5845.114 (Official Build) beta (64-bit)

Version/Channel Information:

• Can you reproduce this issue with the current release?
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the nightly channel?

[aguscruiz]

@boocmp we could solve this by adding a small white circle behind the check icon, so it doesn't become transparent with the background

[rillian]

Verification PASSED on Fedora Linux 38 x86_64 using the following build(s):

Brave | 1.60.96 Chromium: 118.0.5993.88 (Official Build) beta (64-bit) 
-- | --
Revision | b4c059ad1d32d6e0cd1466123f03ccb97b3cf858
OS | Linux

[kjozwiak]

Awesome, thanks @rillian 🎉 Much appreciated.