Allow to pass two colours to Icon

[ematipico]

What version of starlight are you using?

0.22.1

What is your idea?

Allow Icon to accept a darkColor and lightColor props. darkColor is applied when dark mode is active, and lightColor is applied when light mode is active.

Why is this feature necessary?

At the moment Icon accepts a color attribute. However, when working with light and dark modes, a colour could fit one mode but not the other in terms of contract.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[HiDeoo]

Sharing a slightly different approach that I personally use for this case with CSS custom properties which can be passed down to the <Icon> component.

1. Setup custom styles in Starlight.

2. Define a new custom property in my custom CSS file representing the color of the icon in both light and dark mode:

   /* Colors (dark mode) */
   :root {
     --icon-color-red: hsl(359 82% 56%);
   }
   
   /* Colours (light mode) */
   :root[data-theme="light"] {
     --icon-color-red: hsl(359 86% 36%);
   }

3. Use the variable with the <Icon> component:

   <Icon name="star" color="var(--icon-color-red)" size="4rem" />

[ematipico]

Could this be documented somewhere? For example, it wasn't clear that color could be any CSS property

[HiDeoo]

Makes sense, took a stab at it in #1862, will see how it goes. Thanks for the feedback!

[HiDeoo]

The documentation for the component has now been updated to mention that usage and also includes an example.