How do the variables switch from theme color

[schroef]

Hi there,

i bumped into you repo after seeing this post on Adobe I see it uses variables to declare the colors. Are those variables run by the theme colors? I would like to implement such a thing but i don't want to use tons of code for this

[Inventsable]

Hello, apparently I wasn't watching this repo and was never notified of your issue! Sorry for the late reply.

This library watches window.__adobe_cep__ for host app UI theme changes, and uses JSON stylesheets to ripple through and change the values of each variable. It's completely automated and requires very little code to implement:

npm install starlette

Then in any js file:

require('starlette').default.init()

The CSS variables are available from :root, making them accessible throughout your entire panel no matter where. They're not "run by the theme colors" per se since Adobe only reveals a single color, they're all calculated as delta offsets from the base panel background color and have been manually curated -- this allows you to use the library with or even without an Adobe app, like so.

Once the above is working, your CSS is honestly as simple as:

.checkbox {
  /* This takes care of every theme, matching the host app exactly */
  fill: var(--color-checkbox);
}

/* Easily apply the hover state with a single line of CSS via the hover variable */
.checkbox:hover {
  fill: var(--color-checkbox-hover);
}

.checkbox-disabled {
  fill: var(--color-checkbox-disabled);
}

Having made quite a few extensions, I found that it was incredibly tiresome writing in theme logic every single time -- unfortunately unless you do plan to use something like this, you'll find yourself in need of tons of manual code to account for any user theme for a particular app.