Colour Scheme for custom HTML

Anvil Q&A
1

Hey everyone,

I’m trying to use the colour scheme tab in the materials design template, but it doesn’t work for custom HTML forms. I assume this is because only the css written in the theme.css files are linked to the colour schemes page.

At the moment I’m just using :root { --primary-color: “#000000”} in my custom html form and then changing that colour via client code, but it would be much better to be able to use the colour scheme page to customise that. Is this something that is possible?

Regards,
Stephan

2

You can hook into the Color Scheme like so:

:root {
    color: %color:Primary 700%;
}

And just replace Primary 700% with whatever in the Color Scheme you want to use in the Custom HTML.

2 Likes
3

Just to add to this - you can access the colors in python using

from anvil import app

primary_500 = app.theme_colors["Primary 500"]

Depending on how you want to access the colors, you could also create css vars in your theme.css

/* theme.css */
:root {
    --primary-500: %color:Primary 500%;
    --primary-700: %color:Primary 700%;
    --secondary-500: %color:Secondary 500%;
    --secondary-700: %color:Secondary 700%;
}

And reference these vars in the custom html

<style>
.some-class {
    color: var(--pramary-500);
}
</style>

linked topic

Change Theme Colour Scheme values Programmatically - #2

3 Likes
4

@duncan_richards12 and @stucork thank you very much. I just tested this, but it doesn’t work when used on a custom HTML form. Can this only be used on theme.css file?

1 Like
5

Hmm, I’m seeing this too with a minimal example like so:

<head>
  <style>
    div {
      background-color: %color:Primary 700%;
    }
  </style>
</head>
<div>Hello world!</div>

@stucork is there some bad code there? Or should we split this off into a Bug Report?

6

Here is a minimal example with a custom HTML form.
https://anvil.works/build#clone:JCYCUTIEIBY45WAY=CNHTK7YJZ6KPGQSLVRJCWIOS

7

There’s no bug
You can only use the %color:Primary 500% syntax in theme.css
In my post above I suggested adding the :root params to the theme.css

If you move the following code

:root{
  --primary-color: %color:Primary 700%;
}

from the custom html style tags into theme.css it works as expected

2 Likes
8

What’s the design reason that the Color Scheme values can’t be used outside of theme.css?

9

@stucork I understand now what you were showing. That works as expected if you at the root color changes to the theme.css and adjust from there :slight_smile:

1 Like
10

Good question.
That’s just the way it’s been since theme colors were introduced (as far as I’m aware).

I think the css var option is a pretty solid option and gives you the same flexibility as anvil’s custom syntax.

But a feature request to support the custom syntax would be the way to go.

1 Like
11

Done! This would defnitely be a nice Quality of Life DX thing :slight_smile:

1 Like