starlight Tables in Asides

What version of `starlight` are you using?

v0.21.4

What version of `astro` are you using?

4.5.16

What package manager are you using?

bun

What operating system are you using?

Windows

What browser are you using?

Edge

Describe the Bug

The background of table is not harmonious when I add it to an aside component.

light mode:

dark mode:

The source code:

:::note

|     | Low       | Medium     | High       |
| --- | --------- | ---------- | ---------- |
| AFI | 25-30 cm  | 30.1-35 cm | > 35 cm    |
| SDP | 8-11.9 cm | 12-15.9 cm | &ge; 16 cm |

:::

Link to Minimal Reproducible Example

none

Participation

[ ] I am willing to submit a pull request for this issue.

Apr 08 '24 17:04 torn4dom4n

Thanks for the issue @torn4dom4n! I agree this is not ideal styling. It might be possible to override some colours for tables inside asides. Would be curious to see anyone’s ideas for how best to solve this!

Apr 08 '24 18:04 delucis

Dear @torn4dom4n.

I am currently working on making PR that resolves this issue and here is what it currently looks like in my local environment. Are there any changes to the styling you want to make? If not, I will submit my code as a PR so it can be added to the Starlight package.

Thank you

Snowdingo

Apr 15 '24 12:04 SnowDingo

Dear @torn4dom4n.

I am currently working on making PR that resolves this issue and here is what it currently looks like in my local environment. Are there any changes to the styling you want to make? If not, I will submit my code as a PR so it can be added to the Starlight package.

Thank you

Snowdingo

This is good but I think you should change the background between rows like GitHub markdown:

[!NOTE]

Low Medium High

AFI 25-30 cm 30.1-35 cm > 35 cm

SDP 8-11.9 cm 12-15.9 cm ≥ 16 cm

	Low	Medium	High
AFI	25-30 cm	30.1-35 cm	> 35 cm
SDP	8-11.9 cm	12-15.9 cm	≥ 16 cm

It made tables to be clear.

Apr 15 '24 15:04 torn4dom4n

@torn4dom4n, thank you for your suggestion on the styling of the table. Would it be possible for you to expand more on your idea of changing the background between the rows? I got a little confused about what you are suggesting.

Thank you @SnowDingo

Apr 17 '24 11:04 SnowDingo

@torn4dom4n, thank you for your suggestion on the styling of the table. Would it be possible for you to expand more on your idea of changing the background between the rows? I got a little confused about what you are suggesting.

Thank you @SnowDingo

Sure. This is the image:

Screenshot_20240417-233217_Chrome

You can see the second row's background color is different from the third row.

Apr 17 '24 16:04 torn4dom4n

Dear, @torn4dom4n. Sorry for replying late. I figured out how to change the background colors of tables like the GitHub table. What do you think about this new version?

Thank you

Best Regards, Snowdingo

Apr 26 '24 05:04 SnowDingo

@SnowDingo It's too contrast for me

Apr 26 '24 13:04 torn4dom4n

Dear @torn4dom4n.

Thank you for your suggestion about the coloring of the table. I changed the colors so that it has less contrast with each other. It is not the official Starlight color pallet so it doesn't look good on both light & dark themes. What do you think about this?

Sincerely, Snowdingo.

Apr 27 '24 01:04 SnowDingo

@SnowDingo great work. I like the light mode. Dark mode is still too contrast.

Apr 27 '24 01:04 torn4dom4n

Dear @torn4dom4n.

Thank you for your suggestion. I adjusted the alpha property so it looks better in dark mode. What do you think of the new coloring of tables in the aside element?

Best regards, SnowDingo

Apr 27 '24 23:04 SnowDingo

@SnowDingo I love it 👍🏻. Hope the others also like it.

Apr 28 '24 00:04 torn4dom4n

Dear @torn4dom4n.

Thank you for your suggestion. I adjusted the alpha property so it looks better in dark mode. What do you think of the new coloring of tables in the aside element?

Best regards, SnowDingo