How to Set Border Colour to theme:Primary 500

What I’m trying to do:

I want to set the Border colour (through the ide Appearance/Border field) of a component to one of the themed colours.

What I’ve tried and what’s not working:

Something like:

“thin solid theme:Primary 500” (doesn’t work)

“thin solid #2196F3” (works but obviously not linked to the theme)

I do not know the answer to this, but… peaking into the assets theme.css shows that border colors linked to the theme colors are called like

%color:Primary 500%

with a modulo on either side, maybe that would work? I have had the same question long in the past when I knew much less about anvil and gave up at the time.

Thanks for the response but that’s a no go too.

I suspect that there is no parsing of the border attribute field and it is just applied as direct CSS. So no access to colour themes.

This would appear to be a limiting inconsistency in the IDE.

Hi @apearce,

That’s right - the theme colour substitutions only occur in theme.css and in properties that are directly colours (border is a bit of a weird one, as it exposes the full CSS border weirdness).

The best way to do this is probably to set up a role, whose CSS (in theme.css) sets the borders (using %color:Primary 500%), and then use that role for your component.

1 Like

Thanks Meredydd,

My question came about when I was looking at the Theme Colour Scheme. It’s a neat facility to be able to alter the complete colour scheme in a couple of clicks.

However the border colour broke this ability.

It would be nice to be able to enter theme:Primary 500 for example and have the anvil system parse that to the current CSS #Colour.

I understand that might not be possible.

So is there any way for me to read the Colour Scheme #codes and use those to change component border colour programatically on form show for example.

Then when the Colour Scheme theme changes the new #code would be read and the border would follow the scheme completely.

I guess I should also ask if there are any other colour elements like border which would need addressing.

Just re-read my post and realised it might sound like I was ignoring your roles workaround - sorry.

I was thinking that I might end up with a very granular application of roles where I had to apply a different role per component/per form. It’s ok if you just want to apply a border colour but adding other formatting quickly escalates the number or roles required.

I thought it might be easier to follow if basic formatting was kept within the form.

Another thought with regard to roles would be to allow multiple roles to be applied to a component. That might help the granularity aspect.


As you can probably see I’m using these posts to organise my disjointed thinking so appologies for that.

After a quick search it appears that multiple roles are allowed via code:

self.label_1.role = ['blue-text', 'bold-text', 'green-background']

I guess that is the Solution!!

1 Like

@apearce we thought this use case was a good reason to access your apps theme colors in code.

You can now access theme colors at anvil.app.theme_colors

from anvil import *

primary = app.theme_colors['Primary 500'] #2196F3
self.my_component.border  = f'thin solid {primary}'

Should now also work.
It’ll be added to the auto completer soon but should already be available in code.


linked feature request: Theme colours for canvas

6 Likes

@stucork Thanks, that’s really useful.

Is anvil.app.theme_colors read only?

app.theme_colors['Primary 500'] = "#388E3C"

Gives an error:

TypeError: 'mappingproxy' does not support item assignment at

I know, bl…y users!
You give an inch and they want a mile :grin:

It is read only.

Making it read only was an easy implementation - to make it editable it would require some bigger underlying changes.

Feel free to make a feature request so we can gauge interest.

Traditionally, themes are essentially containers for widely-used global constants.

This may lead in to “run-time theme change” territory, e.g., where the end-user is allowed to select a “dark theme” at run-time. If that becomes justification for a Feature Request… :wink:

Never mind - makes sense.

Dynamic Theme changes are possible:

Thanks again.

1 Like