#CSS Variables not Variable-ing

1 messages · Page 1 of 1 (latest)

prime knot
#

I have a light/dark mode theme component that can have different colors based on the page it is on. These are passed as props to the component. This is the important part

`interface Props {
sunFillColor: string
moonFillColor: string
}

const {sunFillColor, moonFillColor} = Astro.props

<style define:vars={{sunFillColor, moonFillColor}}>
#themeToggle {
border: 0;
background: none;
}

.moon { fill: var(--moonFillColor)  }
.sun { fill: transparent; }

:global(.dark) .moon { fill: transparent; }
:global(.dark) .sun { fill: var(--sunFillColor); }

</style>`

The problem is the colors don't always change even if the props change. I should mention I am using ViewTransitions. You can see the full code for the component and the application on GitHub: https://github.com/VidyaSource/website/blob/main/src/components/ThemeButton.astro.

Any thoughts?

pine trench