Official Support for anvil.js.window.anvilThemeVars

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)!!

1 Like

This feature request might be better phrased as - support converting a theme color to a css var.

That way a color can change dynamically when theme colors changes.

Since window.anvilThemeVars is not documented it should not be relied upon.

2 Likes

True. I suppose I don’t much care what the mechanism is as long as it works and is supported! I got a bit wrapped up in how I’m making things work right now.

2 Likes