I find the white square around the logo a bit rought, and would like to suggest a little modification that would improve the look of all the README pages

• on github.com
• in your IDE (phpstorm there)

And the good news is ... there is only one file to update :)

What it could render

Before / After

Github.com

Before	After

phpstorm

Before	After

How can it be done

The good news is that you would just have to update the logo file which is linked in all those README :

<p align="center"><a href="https://symfony.com" target="_blank">
    <img src="https://symfony.com/logos/symfony_black_02.svg">
</a></p>

By adding a couple of lines of CSS in the SVG, the logo can be modified depending on the user dark/light mode

Let's use a simplified SVG code for the Symfony logo

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 122">
  <path id="circle" d="..."/>
  <path id="sf" fill="#fff" d="..."/>
  <path id="symfony" d="..."/>
</svg>

Solution 1 : Filter Invert

If you want to get a quick win, you can simply invert the image via the invert filter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 122">
  <style>
    @media (prefers-color-scheme: dark) { 
      path { filter: invert(1) }
    }
  </style>
  <path id="circle" d="..."/>
  <path id="sf" fill="#fff" d="..."/>
  <path id="symfony" d="..."/>
</svg>

Solution 2 : Manual override

Personnaly, i'd rather write things explicetly, so you could do it like that too (or in a dozen of other ways i guess... 😅 )

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 122">
  <style>
    @media (prefers-color-scheme: dark) { 
      path { fill: #fff; }
      #sf { fill: #000; }
    }
  </style>
  <path id="circle" d="..."/>
  <path id="sf" fill="#fff" d="..."/>
  <path id="symfony" d="..."/>
</svg>

What do you think ?