swiper-pagination-color not applied to 'fraction'

[Mariusthvdb]

when using either bullets or progress bar on pagination, the theme color swiper-pagination-color is applied. in theme:

    swiper-pagination-color: red #apllied to bullets (but only the active) And progressbar but Not to fraction
    swiper-navigation-color: red #applied to left/right arrows
    swiper-navigation-size: 30px #applied to left/right arrows

However, when using fraction, to show 1/3, that same theme color is not applied. We can see in dev tools inspector that

however, trying t set that using card_mod has no effect (probably;y because I havent found the correct syntax yet)

            card_mod:
              style: |
                :host {
                  color: red;
                }

I did try and search in the resource where this might be set, to see if we can fix it (seems a bug/omission), but no luck there.

Leaving 2 issues:

• how to set the color on the fraction pagination
• how to set the background color on the inactive pagination bullet swiper-pagination-bullet:

[Mariusthvdb]

this seems to work for the fraction: use mod-card

        - type: custom:mod-card
          card_mod:
            style:
              swipe-card:
                $: |
                  /* colors the whole fraction  element: '1/3' */
                  /*.swiper-pagination-fraction {
                    color: white;
                  }*/
                  /* colors the '1' in: '1/3' */
                  .swiper-pagination-current {
                    color: var(--swiper-navigation-color);
                  }
                  /* colors the '3' in: '1/3' */
                  .swiper-pagination-total {
                    color: gold;
                  }
              .: |
                ha-card {
                  font-weight: bold;
                  font-size: 20px;
                  color: white; */sets the full line, or only the '/', when the other elements are colored individually
                }

though using custom:mod-card on the swipe-card causes intermittent cards to be not displayed inside the swiper..

making this useless.

Ill write that in a dedicated issue, so it is visible for others, and not buried inside this

[mamarguerat]

Same problem here. I wanted to change the inactive pagination bullet color with swiper-pagination-bullet. With card-mod it works but it's very slow or doesn't charge the card. I tried with custom CSS as ressource but it doesn't work neither. The main problem with this color is that the default is to #000 and opacity at 0.2 and for dark mode we can't see the bullets.

Is there a possibility to update the card with a CSS variable for the color, for example var(--secondary-text-color) or var( --ha-card-background) ?