Custom Theme Help: Flexible Measure Colors & Axis Tick Styling

InsightPilot — Tue, 22 Jul 2025 20:34:54 GMT

Hi Qlik Community,

I'm customizing a Qlik theme and have two questions I could really use help with:

1. How can I make KPI/measure colors flexible in a custom theme?

I want to define a default measure color (e.g., white for dark mode), but still allow designers to change the measure color in the property panel. Currently, it stays fixed and cannot be overridden.

What I tried in `theme.json`:

"object": {
  "kpi": {
    "value": {
      "color": "@measureColor"
    }
  }
},
"color": {
  "palette": {
    "measureColor": "#FFFFFF"
  }
}

What I tried in `theme.css`:

.qv-object * {
  color: #FFFFFF !important;
}

But this seems to override everything and makes the measure color uneditable in the UI. What's the correct way to define a default color without locking it?

2. How do I style the axis tick values (not labels or titles)?

I'd like to set axis tick numbers (e.g., 0, 5, 10…) to a specific color like #E0E0E0, but keep titles/labels untouched.

What I tried in `theme.css`:

.qv-axis text,
text.qv-axis {
  fill: #E0E0E0 !important;
}

Also tried:

.qv-object-axis text {
  fill: #E0E0E0 !important;
}

Neither worked. Does anyone know the right selector or workaround for targeting just tick values?

I’ll include a screenshot for clarity.
Thanks so much in advance!

Re: Custom Theme Help: Flexible Measure Colors & Axis Tick Styling

Kaushik2020 — Wed, 06 Aug 2025 06:56:55 GMT

Could you please suggest what is the key objective of doing these via the Theme ? isn't it there or doable with the default options which we have.

If you can share some insights about your task, it would help me to share more details.

topic Custom Theme Help: Flexible Measure Colors & Axis Tick Styling in App Development

Custom Theme Help: Flexible Measure Colors & Axis Tick Styling

1. How can I make KPI/measure colors flexible in a custom theme?

What I tried in theme.json:

What I tried in theme.css:

2. How do I style the axis tick values (not labels or titles)?

What I tried in theme.css:

Re: Custom Theme Help: Flexible Measure Colors & Axis Tick Styling

What I tried in `theme.json`:

What I tried in `theme.css`:

What I tried in `theme.css`: