Tables in Asides

[torn4dom4n]

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 | ≥ 16 cm |

:::

Link to Minimal Reproducible Example

none

Participation

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

[delucis]

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!

[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

[torn4dom4n]

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

It made tables to be clear.

[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

[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

Sure. This is the image:

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

[SnowDingo]

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

[torn4dom4n]

@SnowDingo It's too contrast for me

[SnowDingo]

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.

[torn4dom4n]

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

[SnowDingo]

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

[torn4dom4n]

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

[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

Let's create a PR.

[SnowDingo]

@torn4dom4n

Before I create a PR that resolves this issue, would you mind reviewing the rest of the coloring for the other types of Aside elements?

Best Regards,
Snowdingo

[torn4dom4n]

@SnowDingo I really love all of them.

[SnowDingo]

Dear @torn4dom4n.
I created a PR that resolves this issue.

#1796

Thank you for contributing to Astro Starlight!

Sincerely,
Snowdingo