css variables will not work with .k-list-item

[Ron]

I'm working with my first instantiation of a light / dark theme and to do this I'm using css variables.

An example of what I mean:

input::placeholder {
  color: var(--input-placeholder);
}

What I'm noticing however for the items in a dropdown list is that if I use css variables I'll only see the initial set color (I just tested this with kelly green as the default) but if the variable switches the dropdown background and text colors will not update. An example of the css that I have in my all.css file:
.k-list-item {
  color: var(--input_color);
  background-color: var(--k_input_background2);
}

I just tried setting the program to dark mode and then creating the component and dropdowns after that's already selected - I still get the initial / default value not the actual. To clarify I'm setting other kendo css with this such as the grids, input backgrounds and text color, all of it's working fine - this is the only place it seems to be failing.

Let me know if this sounds familiar and if so what recommendations you have to work around this issue.

[Georgi]

Hi Ron,

Thank you very much for the details provided.

From what I understood from your question, you are currently utilizing the Kendo UI for Angular DropDownList component and are experiencing issues modifying the style of the component's items using CSS variables. Please, correct me if I misunderstood you.

Based on the provided information in the thread, I tried reproducing the issue that you are experiencing. However, it seems to me that I might be missing out on some of the reproduction steps since the styling of the component's items are adjusted correctly on my side when using CSS variables.

For reference, here are two StackBlitz demos where I tested the configuration:

Styling is provided in the styles.css file:

https://stackblitz.com/edit/angular-rmdz5b

Styling is provided in the component file:

https://stackblitz.com/edit/angular-rmdz5b-vpv3p4

In order to avoid misunderstandings, I would ask you to provide more detailed information about the specifics of the implementation or ideally a small runnable example demonstrating the issue. This would allow me to gain a better understanding of the exact scenario and thus provide more case-specific suggestions. 

I am looking forward to your reply.

Regards,
Georgi
Progress Telerik

[Ron]

Georgi,

First of all sorry I missed the email notification if one went out.

I just updated your code with the following and it did exactly what I wanted it to do:

export class AppComponent {

  isGreenTF: boolean = true;

  public areaList: Array<string> = [
    'Boston',
    'Chicago',
    'Houston',
    'Los Angeles',
    'Miami',
    'New York',
    'Philadelphia',
    'San Francisco',
    'Seattle',
  ];

  changeTheme(): void {

    this.isGreenTF = !this.isGreenTF

    if(this.isGreenTF){
      document.documentElement.style.setProperty('--test', 'blue');
      document.documentElement.style.setProperty('--white', '#f0f0f0');
      document.documentElement.style.setProperty('--green-color', 'yellow');
    } else {
      document.documentElement.style.setProperty('--test', 'red');
      document.documentElement.style.setProperty('--white', '#ffffff');
      document.documentElement.style.setProperty('--green-color', 'green');
    }
  }
}


For how I've been working with this in my project here's a truncated list of the kind of thing I'm doing:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  private _darkMode = new BehaviorSubject<boolean>(false);
  darkMode$ = this._darkMode.asObservable();

  constructor() {
    // Set initial dark mode based on user preference
    this._darkMode.next(this.isDarkModePreferred());
  }

  toggleDarkMode(val: boolean) {
    this._darkMode.next(val);
  }

  isDarkModePreferred(): boolean {
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  }

  getCSSVariables(): Record<string, string> {
    return this._darkMode.value
      ? {
        '--area_background_control': '#222'
      }
      : {
        '--area_background_control': '#eeeef0'
      };
  }
}




styles.css:

:root {
  --area_background_control: #eeeef0;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --area_background_control: #222;
  }
}

.controlFrame {
  background: var(--area_background_control);
}



It could be that I need to just try a different approach to implementing these and maybe I'll get the same result as your demo. I'll check back in and let you know what happens!

[Georgi]

Hi Ron,

I am happy to hear that the suggested approach helped you achieve the desired customizations in the background color of the DropDownList items on your side.

With that being said, please feel free to take your time to further review the suggestion and find a suitable way to incorporate it into your application. Furthermore, please do not hesitate to reach out if you have any further questions. In case some of the communication needs to remain private, consider opening a private support ticket instead of a forum thread:

https://www.telerik.com/account/support-center/contact-us

Let me know how it goes.

Regards,
Georgi
Progress Telerik