Best practice for theming different ListView implementations in a Frappe app theme

Frappe Framework
1

I’m building a Frappe app that provides a custom UI theme.
When this app is installed on a site, it should change the appearance of list views globally (header color, row background, hover, selected state, etc.).

The problem is that the site contains multiple list view implementations:

  • The built-in Grid-based ListView from Frappe UI

  • Several custom Flexbox-based lists that represent list views but use different CSS classes and DOM structures

Although they are conceptually the same “list view”, their CSS selectors are different, so a single class override does not work.

I want to:

  • Ship one theme CSS file with my app

  • Apply consistent colors/styles to all list views

  • Avoid breaking existing layouts or using overly aggressive global overrides

My current approach is:

  • Wrapping list views with a semantic class (e.g. .app-theme-list)

  • Defining CSS variables for colors in that class

  • Mapping those variables to Grid ListView and Flex list selectors separately

.app-theme-list {
  --list-header-bg: linear-gradient(135deg, #b91c1c, #f59e0b);
  --list-row-hover-bg: #fde68a;
}

Is this the recommended or accepted pattern for building a theme app in Frappe?
Are there any official theming hooks or best practices for handling different list view implementations?

Thanks in advance!