Theme.css and the %% symbol

Anvil Q&A
1

What I’m trying to do:
Understand what this is in theme.css

.left-nav a.anvil-role-selected, .app-bar a.anvil-role-selected  {
  background-color: %color:Secondary Container%;
  color: %color:On Secondary Container%;
}

Specifically what does the percent(%%) signs in this line: the “color: %color: On Secondary Container%;”
what do they do ?? i thought maybe it was a CSS thing but i don’t see that in the spec

What I’ve tried and what’s not working:
searched the forum and google
Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app

2

This lets you drag through bits from Anvil, like custom colours set up in your app.

3

The syntax matches MS-DOS environment string references and in-line substitution.

4

thanks @p.colbert and @james.patrick , the ‘MS-DOS environment string reference’ lit up the old bulb !!

5

It looks like someone has borrowed the syntax. However, I seriously doubt that browsers run MS-DOS under the hood. So it would be really nice if this particular usage was documented somewhere.

If it is already documented, a pointer to that documentation would sure clarify it for me!

6

If you look at the source code for the runtime engine, you’ll see that being used as a placeholder for substitution of those values:

1 Like
7

Ah! So it’s a feature of the Anvil Server, not of CSS in general. Thanks, Owen!

8

Yep. I sometimes replace it entirely with css variables.