Multiple themes.css in one App

Anvil Q&A
1

What I’m trying to do:

Test a custom component with multiple Anvil themes (MD3, Rally, etc.) within one app. For example, my custom component has all of its HTML and CSS self contained. However, when I import it to other apps, those apps may have one of many themes. I’d like to do all my testing in this one component app.

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

I have multiple ‘themes_something.css’ files in my assets folder of this component app. I got rid of a ‘themes.css’ file as that seems to be what the app looks for when styling the app.

I load the CSS files into different forms by creating custom HTML forms with the following HTML:

Code Sample:

<link href="_/theme/theme_md3.css" rel="stylesheet" type='text/css'>

<div anvil-slot="default"></div>

I tested this on some common components of Material Design 3. Some styling gets applied, but other styling (specifically, border styles) does not. I found this strange. Is this approach even possible?

Clone link:

2

Hi @yahiakalabs,

The post is a bit too general.
Could you provide a minimal example/clone link/reproduction steps, so that users in the forum can reproduce what you’re seeing?

3

For the sake of this post, I am only going to test Anvil’s basic components. Clone link is in the first post.

Form: DemoMD3Base

The form contains two components: an outlined button and an outlined card (from Material Design 3). It also has custom HTML:

<link href="_/theme/theme_md3.css" rel="stylesheet" type='text/css'>

<div anvil-slot="default"></div>

With Material Design 3’s theme.css, they look like this:

image
image1678×1018 80.6 KB

When I rename the theme.css to theme_md3.css, it now looks like this:

image
image1678×1018 63.1 KB

When I remove the reference to the theme_md3.css, I get this:

image
image1678×1018 79.1 KB

Clearly, the reference to theme_md3.css is doing something, but it doesn’t seem to be reflecting the ‘outlined-card’ and ‘outlined-button’ roles.

1 Like
4

Ah - what you’re seeing here is that theme.css is special in that the %color:Primary% syntax is being replaced from your theme colors. (This would be a good feature request - make all css files support anvil’s theme color syntax)

If I were doing this I might use css vars

My theme.css would probably be a bunch of vars like

:root {
    --primary: %color:Primary%; /* Or just the raw value */
}

And then inside theme_md3.css I would replace the use of %color:Primary% with

var(--primary)

3 Likes
5

Worked like a charm, thanks!

1 Like