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

**URL:** <https://forums.knack.com/t/apply-custom-css-to-only-light-or-dark-mode-next-gen/19939>\
**Category:** Next-Gen\
**Created:** [October 7, 2025, 3:13pm UTC](https://forums.knack.com/t/apply-custom-css-to-only-light-or-dark-mode-next-gen/19939 "2025-10-07T15:13:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cheyenne](https://avatars.discourse-cdn.com/v4/letter/c/7c8e57/32.png) [@Cheyenne](https://forums.knack.com/u/Cheyenne)\
**Post date:** [October 7, 2025, 3:13pm UTC](https://forums.knack.com/t/apply-custom-css-to-only-light-or-dark-mode-next-gen/19939/1 "2025-10-07T15:13:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Kara](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/kara/32/2717_2.png) [@Kara](https://forums.knack.com/u/Kara)\
**Post date:** [October 7, 2025, 8:36pm UTC](https://forums.knack.com/t/apply-custom-css-to-only-light-or-dark-mode-next-gen/19939/2 "2025-10-07T20:36:13Z")

</div>

Hi @Cheyenne !

Yes, here is an example:

```auto
/* 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