Standardized global CSS variables for easy branding (color overrides)

Hi everyone,

First, thank you for maintaining this excellent integration of Klaro! for Drupal. It works great, but I’ve encountered a common challenge: branding.

Currently, overriding the default Klaro colors (especially the "success" green and specific button gradients) requires very high CSS specificity or the extensive use of !important. This is because styles are often deeply nested or applied directly to utility classes like .cm-btn-success.

To help other developers who need to align Klaro with their brand identity, I would like to suggest implementing a more consistent set of CSS variables.

In the meantime, for those looking for a global "one-step" solution to change the primary brand color across all elements (buttons, switches, and contextual notices), this SCSS/CSS snippet using the #klaro ID as a wrapper has proven to be the most effective:

It would be a great addition if the module could provide a simple UI field for a "Primary Brand Color" or at least a documented set of CSS variables that are respected across all components (including contextual notices).

Keep up the great work!

Best regards,
Vladim