This blog post is about a (failed) attempt at introducing dark mode for our logo SVG's in the readme files of our open source libraries at Laravel. Almost all of the readme-files in our repositories have a header with the logo of the project and some badges like this: These feature a transparent logo SVG with an icon and dark letters which is loaded through an img element: This has always worked well because GitHub always used to use a white background with dark text for its readme files.

But because of this change our logos now look like below when dark mode is enabled: I was wondering if we could fix that.

Unfortunately, this only worked in Chrome and Firefox and I wasn't able to get it to work in Safari which I found out.

If it is, and the user's color theme switches automatically we know that GitHub will be in dark mode as well.
Newsletter

Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week

Fathom Analytics | Fast, simple and privacy-focused website analytics. Fathom Analytics | Fast, simple and privacy-focused website analytics.
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future. Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners