The Request
Could the existence of anvil.js.window.anvilThemeVars
please be added to the docs and made an officially supported tool?
My Use Case
Custom components often need to define some css. This is especially true if they are based on external js libraries that come with css defined and some of that needs to be overridden.
If those components are defined within an app that’s intended for use as a dependency, using theme.css
isn’t an option - and that means the text substitution for color names isn’t available.
In order for those components to honour any colour changes via anvil.app.theme_colors
, the component instead needs access to the css variables which are defined for those colours. However, those variables have unpredictable names and can’t be used directly.
anvil.js.window.anvilThemeVars maps the colour names from the scheme to the name of the css variable currently in use, and is thus ideal for what I’m attempting to do. As it isn’t documented, so I’m a little wary of depending on its behaviour.
(Yes, I did go poking around in the source code to see how those css variable names arise and how I might extract them in order to find this)!!