Updating/Dynamic App Theme at Runtime

kaleb · February 19, 2025, 1:43am

I have an app that I want to deliver to a number of different clients, I want to be able to theme the app differently for each client. I know there is a way to update CSS dynamically, but each client’s theme might edit different components in different ways depending on requirements. A client would probably be given a different URL/login for the app, so I want to be able to pull the required modified colours from somewhere when a client first opens the app

duncan_richards12 · February 19, 2025, 9:28am

You can use the CSS injection from anvil extras (yes I know it has an _ at the beginning so it’s meant to be a private class… but, it’s worked for a loong time, so shouldn’t be a problem).

I stored the dynamic CSS in a data table, but you could store it in modules or files or files in the data tables.

owen.campbell · February 19, 2025, 9:44am

If it’s just colours you want to change, Anvil Extras has a module for that:

It seems we failed to include a link to its documentation on our main docs site but here’s the source doc:

github.com

anvilistas/anvil-extras/blob/main/docs/guides/modules/theme.rst

Theme
=====
Define color schemes for your app and switch between them easily.

The module includes the definition of the anvil standard Material Design color schemes and those are used as the default. You can also define your own color schemes and use them in the same way.

Examples
--------
Create an instance of the `theme.Colors` class:

.. code-block:: python

    from anvil_extras import theme

    colors = theme.Colors()

By default, that instance will have a `schemes` attribute that contains the standard Material Design color schemes.

You can use the instance to set the color scheme of your app to either the 'light' or 'dark' variant of one of those standard schemes.

This file has been truncated. show original

duncan_richards12 · February 19, 2025, 10:21am

Ya know, it’s a funny thing, I saw that in autocomplete earlier and had no idea what it was for, haha.

owen.campbell · February 19, 2025, 10:47am

Docs now fixed:

https://anvil-extras.readthedocs.io/en/latest/guides/modules/theme.html

kaleb · February 19, 2025, 9:12pm

This is great thank you. Already use extras fairly extensively so this should be an easy addition