Gauge card change text color

Configuration Frontend
1

hello

How can i change text color of the gauge card without change the whole theme?
I try with card mod but that’s not working.

                  - type: gauge
                    card_mod:
                      style: |
                        ha-card {
                          background-color: transparent;
                          color: white;
                        }
                    entity: sensor._range_electric
                    needle: true
                    name: Electrisch
                    min: 0
                    max: 60
                    segments:
                      - from: 0
                        color: '#FF0000'
                      - from: 12
                        color: '#fa6d02'
                      - from: 25
                        color: '#faf602'
                      - from: 38
                        color: '#cafa5a'
                      - from: 50
                        color: '#05ff0d'
                      - from: 60
                        color: '#43a047'

Schermafbeelding 2024-01-08 205150
Schermafbeelding 2024-01-08 205150873×266 111 KB

Thx

2

with the help of jimz011 on discord i allready came that the text is white
I just need to setup the color of the needle but that is not working.

Code so far

                   card_mod:
                      style: |
                        ha-card{
                          background-color: transparent;
                        }
                        .name, .value-text {
                           color: white !important;
                         }
                        .needle {
                          color: red !important;
                        }
3

Still not working
Any1 have a idea how to get the value and the needle in a color?

                  - type: gauge
                    card_mod:
                      style: |
                        ha-card{
                          background-color: transparent;
                        }
                        .name {
                           color: white !important;
                         }
                        .value-text {
                           color: white !important;
                         }
                        .needle {
                          fill: red !important;
                        }
4

I only have a solution for the needle, not for the value.

card_mod:
  style:
    ha-gauge $: |
      .needle {
        fill: #ee877c !important;
      }
5

I wanted to use a darker background but the needle “vanishes” so i tried the fill style(as shown above by scw2wi).
The fill changed the needle color, so far, so good.
But unfortunately if those “fill” was used i could no longer add other styles and the value was still in black color, so… useless.
So I tried it the other way round:

card_mod:
  style: |
    ha-card{
    background-color: #006666;
    .name {color: red;}
    --primary-text-color: #ffffff; 
    }

The primary-text-color applies to both, the needle and the value.