Related comment addressing this issue: #616 (comment)

@nucleogenesis @LianaHarris360 I would like to work on this issue. Could you please assign me this issue?
And Can you guide me whats the requirement which needs to be done inorder to resolve this issue.

Sure, I can assign you @shruti862. To resolve this issue, in lib/keen/styles/variables.scss, find the SCSS variables (like $ui-input-label-color) that depend on theming values and remove them because these variables are only set at build time and are not updated at runtime.

Wherever those SCSS variables are used in KDS components or styles, replace them with the corresponding JS/Vue theme variables.

For example, $ui-input-label-color is set to secondary-text-color which is set to #666666.

In lib/styles.colorsMaterial.js, #666666
corresponds to $themePalette.grey.v_700.

So we'd need to remove the css:

color: $ui-input-label-color;

and use the theme variable directly in the Vue template:

:style="{ color: $themePalette.grey.v_700 }"

or set it with dynamic class binding if necessary.

Because we can’t rely on CSS variables for Vue.js CSS binding across all supported browsers, Vue’s inline style binding or dynamic classes referencing the $themePalette directly must be used.

If you have any other questions, or need more clarification, just let us know!

@LianaHarris360 Thank you for assigning me the issue. I understood whats needs to be done thank you for explaining so well.

Hey @LianaHarris360 , I wanted to ask whether i needed to remove $brand-accent-color: $md-purple-a400 !default;
and $ui-input-text-color: $primary-text-color !default; because I don't find matching color for them in themePalette

Also Can you please review my PR to see whether i am going in right direction or not .

@shruti862 It seems that $brand-accent-color is only used for the UI components (keen), but their styles get overridden. Since some of these components are currently used in Kolibri, we won't be changing the styles or checking how those changes affect Kolibri in this PR. And for $ui-input-text-color, it is okay as is, because it is just an opaque black.