Top panel autofill dropdown defaults to Dracula theme in custom theme

[cryptoderes]

Bug Report

Steps to Reproduce:

Code Sandbox: https://codesandbox.io/p/sandbox/perspective-custom-theme-bug-6y24tl

• Take the viewer example on Perspective's main page
• Create custom Perspective theme in CSS file
• Add custom theme to viewer
• Begin typing into any input in the top panel

Expected Result:

Background and text of the autofill drop down matches the theme (currently viewing in Pro Dark).

Actual Result:

Background and text of the autofill drop down are of the Dracula theme (currently viewing in custom theme).

No matter what color I set the background or text to in the custom theme's CSS, it does not appear to affect the autofill dropdown as it is always themed with Dracula. I was not able to find any variables in the currently existing themes that successfully overrode Dracula or addressed the issue.

Environment:

• @finos/perspective version 3.3.3
• Chrome

Additional Context:

It was previously mentioned in the custom theming request that the best practice is to copy an existing theme and modify it. However, when copying an existing theme there does not appear to be an exposed variable that can modify the autofill drop downs. As such the example only has one custom CSS variable to cut down on bloat.

[texodus]

--theme-name is the CSS variable that sets the dialog theme attribute to inherit (this element is not a direct DOM child of the viewer element). This is why we recommend starting from an existing theme - there are variables you must define for the theme to work as well as some non-obvious structure for styling dialogs, dropdowns, plugins, exports, Intl, icons, etc.

I think maybe we can remove the --theme-name variable and prevent dracula from leaking in un-themed perspective - but un-themed perspective is not intended to be used directly.