# Nav Button Highlighter component - now working

**URL:** <https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818>\
**Category:** Theme component\
**Created:** [November 18, 2025, 1:14pm UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818 "2025-11-18T13:14:04Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)\
**Post date:** [November 20, 2025, 8:54pm UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/10 "2025-11-20T20:54:57Z")

</div>

Ok, i think i found the SCSS issue.

I found these in @NateDhaliwal carousel component:  
SCSS (common.scss):

```plaintext
@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

```

Settings (settings.yml):

```plaintext

pagination_button_color:
  type: string
  default: ""

```

For anyone else struggling:

- inject into CSS custom properties using `#{$var}` syntax
- Then use those CSS variables elsewhere for the Swiper library to read them

This works because:

1. Settings variables can be interpolated with `#{}`
2. CSS custom properties accept string values
3. The actual styling uses the CSS variables, not SCSS functions

I’ll update this plugin with the more modern version soon.

---

_[View the full topic](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818)._