I've been using Font awesome (6.1.0) without any problem in my app until I decided to introduce Dark theme option. Regarding icons the only style that I change is their color:
From:
To:
If you look closely enough you'll see the difference (its thickness).
Code:
<i class="far fa-calendar-plus fa-3x"></i>As I've deeply analised, all the computed variables remain the same (except the color obviously)
Original (light theme):
Dark theme:
Could you please help me with this issue?
Edit:
Include measurements (as asked)
Edit 2: Snippet added
<link href="https://site-assets.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet"/>
<div style="background-color:white">
<span style="color:black">Light</span>
<i class="fa-solid fa-calendar-plus fa-5x"></i>
</div>
<div style="background-color:black">
<span style="color:white;margin-right:5px">Dark</span>
<i class="fa-solid fa-calendar-plus fa-5x" style="color:#FFF"></i>
</div>