Apply custom CSS to only light or dark mode (Next-Gen)

Next-Gen
1

Hi all! I was wondering if there is a way to apply custom CSS to only light or dark mode in my app. For example, I want to set my navigation buttons to be a certain color in light mode, but I don’t want them to be that color in the app’s dark mode–is there a way to differentiate in the custom CSS?

2

Hi @Cheyenne !

Yes, here is an example:

/* Light mode - blue navigation buttons */
html[data-theme="light"] .kn-main-nav-item {
  background-color: #007bff;
  /* Blue background */
  color: white;
  border-radius: 4px;
}

/* Dark mode - gray navigation buttons */
html[data-theme="dark"] .kn-main-nav-item {
  background-color: #6c757d;
  /* Gray background */
  color: white;
  border-radius: 4px;
}

I hope this helps!

Kara

3 Likes