Customizable CSS for Perfetto trace viewer

[christoph-hart]

trafficstars

Hi there,

I was wondering if there are any plans to support custom CSS stylesheets for the perfetto viewer web app. I would love to use perfetto in dark mode.

Currently it hard links to https://ui.perfetto.dev/v37.0-c69b33b9a/perfetto.css, but if that could be configured in the settings it would be great.

[chromy]

Hey! We're open to having a dark mode but it is pretty far down our priority list so it will not happen that soon.

Theoretically it is:

• a little bit of plumbing for the switch
• editing the color variables here https://cs.android.com/android/platform/superproject/+/master:external/perfetto/ui/src/assets/widgets/theme.scss;l=29
• fixing up the remaining places that use hard coded colors

Some folks have worked a bit on it in the past but nothing has landed: https://android-review.git.corp.google.com/c/platform/external/perfetto/+/2618274

If that is something you would be interested in contributing let us know, happy to walk you through it in more detail but otherwise it will come - but it might be a while.

[LalitMaganti]

@stevegolton @cdamus should we add support for this as part of fixing https://github.com/google/perfetto/issues/2166? Should be a simple addition to expose a setting for this?

[stevegolton]

I'm not too sure that being able to set the UI to use a completely different stylesheet would be practical - for one it would be a nightmare to keep in sync as the styles do change frequently.

However, we have just introduced a new dark mode feature which is available on the autopush channel (go to Settings -> [Experimental] UI Theme) - beware it is experimental and has some sharp edges.

[LalitMaganti]

Should we maybe allow overriding the CSS variables tho? Should be straightforward no?