Typescript error and CSS Dark not working

[wary swan]

So I'm getting a Typescript error when trying to access the {i} index of my component. The code works tho I just want to understand why am I getting a Ts error

also, I'm trying to use dark media selectors but every time I toggle my Starlight docs to dark it doesn't apply the colors I've specific in my custom.css file (i tried using, the default colors from CSS like background-color: red; and I even tried using the !important rule and it didn't work out

[data-theme='dark'] .classList {
  background-color: var(--yma-color-high);
}

[data-theme='dark'] .classItem {
  background-color: var(--yma-color-low);
  border: 1px solid #2d2f33;
  color: var(--yma-color-high);
}

[data-theme='dark'] .propertyCode {
  background-color: var(--yma-color-high);
  color: var(--yma-color-high);
}

[hallow ether]

afaik you don't need key in Astro, just remove it

[wary swan]

lol

thanks!

[hallow ether]

you are welcome

[wary swan]

about the css part can you please also help me?

[hallow ether]

css code should be good, not sure if you are getting data-theme='dark' in your html, check if its applied.
I don't see the JS code and HTML were you apply it

[lime glade]

If that CSS is inside your .astro component, it will “scope” the styles to only that component by default (see “Scoped Styles” in the Astro docs).

But the element with data-theme="dark" is not in your component, so the generated styles won’t work correctly.

To fix this, you can use the :global() selector to tell Astro to not scope that part of your selector. For example:

:global([data-theme='dark']) .classList {
  background-color: var(--yma-color-high);
}

[wary swan]

oh, i see it now, thanks!!

[wary swan]

also, thank you too!