been looking for just that today, see: 🔹 Card-mod - Add css styles to any lovelace card - #4191 by Mariusthvdb and only found my way through these just yet:
swiper-pagination-color: red
swiper-navigation-color: green
swiper-navigation-size: 24px
swiper-preloader-color: gold
# :host {
# --swiper-theme-color: var(--primary-color);
# }
top variables can be set like that in your themes, or, like in the commented bit, directly in a card_mod.
as you can see the primary-color is used, so if you change that, it will also affect the swiper elements.
the pagination color only affects the active swiper bullet, for the other (inactive) bullets there is only a background color set, and an opacity:
the other theme variables are used in the resource:
swiper-navigation-color: green #used on the navigation elements (left and right, arrows)
swiper-navigation-size: 24px # used on those same elements
swiper-preloader-color: gold #not sure where this applies
but I have yet to find where they apply I have set them in my theme like above now, so they would stand out, but they dont…
havent found the correct dom path yet to change those directly in a card config, and would really love to do so…
update
some detailed complexity: when using either bullets
or progress bar
on pagination, the theme color swiper-pagination-color
is applied. However, when using fraction
, to show 1/3
, that same theme colors is not applied, and we have to go into inspector to reveal
using that:
card_mod:
style: |
:host {
color: red;
}
does Not work however…
made it this far:
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: blue;
}
/* 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
}
unfortunately, the mod-card seems to lose some cards in the swiper… no idea why, but taking out the mod card brings them back…