Skip to content

Commit

Permalink
Update vizro-core/docs/pages/user-guides/card-button.md
Browse files Browse the repository at this point in the history
Co-authored-by: Jo Stichbury <[email protected]>
  • Loading branch information
huong-li-nguyen and stichbury authored Dec 4, 2024
1 parent 55929a5 commit 395d4e4
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion vizro-core/docs/pages/user-guides/card-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,9 @@ To float an image for example to the right of the text, use the `src` attribute

### Make an icon responsive to theme switch

To make an icon responsive to theme switching, override its [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). In this example, we use the `--fill-icon-image-card` CSS variable from the `vizro-bootstrap` CSS file. It leverages the `invert()` function to flip the icon's color during a theme switch.
To make an icon responsive to theme switching, override its [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).

In this example, we use the `--fill-icon-image-card` CSS variable from the `vizro-bootstrap` CSS file. It uses the `invert()` function to flip the icon's color during a theme switch.

This approach works if your icon initially has a white fill color. If not, modify the SVG code by adding `fill="white"`.

Expand Down

0 comments on commit 395d4e4

Please sign in to comment.