Catch panel primary color for custom widget coloring

Panel
1

Hey,

I am just dropping here an information i didn’t find on the documentation if someone needs it. When making a custom panel widget with its own .css, the panel main color can be found using this css code (as found in the pmui widgets css):


:host {
  --primary-color: var(--design-primary-color, var(--panel-primary-color));
  --button-primary-text-color: var(
    --design-primary-text-color,
    var(--panel-on-primary-color)
  );
  --background-text-color: var(
    --design-background-text-color,
    var(--panel-on-background-color)
  );
  --surface-color: var(--design-surface-color, var(--panel-surface-color));
  --surface-text-color: var(
    --design-surface-text-color,
    var(--panel-on-surface-color)
  );
}

The color variables can then be used later in the custom widgets css as in this background coloring example:

.some_object {
  background-color: var(--surface-color);
}

The caught colors update when using the page/templates dark mode features.

Have a nice day