Support dark mode

[rvanlaak]

Q	A
Symfony version	5.0.3
Bundle version	8.0.0

The following two css rules cause problems for dark mode:

Before

After removing CSS rules

What about removing the two lines?

[gregurco]

Hello Good observation! I'm not sure about removing, because we want to highlight these boxes, but I think dark mode adds some classes at the top level. I think we can add some rules, when dark mode is activated, colors will switch to dark style or light style, but not the same as background.

[rvanlaak]

Would be good to follow the Symfony best practices on styling of the panels. Might be an idea to reuse the css classes from the profiler?

[gregurco]

reuse the css classes

which classes do you mean? Could you give examples?

[rvanlaak]

These can be found at symfony/web-profiler-bundle/Resources/views/Profiler/profiler.css.twig, which is the base CSS that gets imported when the pane would @WebProfiler/Profiler/base.html.twig.

As example I'd advise using:

• .metric
• .badge
• .sf-tabs (also have js behavior)

[gregurco]

@rvanlaak sorry for the late reply. I think the idea is good, to use classes provided by symfony. Do you want to integrate that? PR is welcome.

[gregurco]

Done in #316