Changing icon for dark/ligt mode

[LamerManuel]

Hello, how can I realize that when you are in dark mode, the icon changes from a sun to a moon? Probably not hard to do, but I'm still a greenhorn and learning. Thanks in advance for your answer.

[prototypa]

Hi @LamerManuel,

The advantage of Astro is that you can use any popular framework like React, Vue, Svelte, Angular, Preact, AlpineJS... to make your website interactive.

As a foundation in AstroWind, for the moment, we have tried to use vanilla javascript and very little, so that the template is a base with fundamental code and each developer can decides how to follow their project, with which frameworks, etc.

That said, you can start by making a few small changes to the current vanilla javascript code in the following files:

• https://github.com/onwidget/astrowind/blob/main/src/components/core/ToggleMenu.astro
• https://github.com/onwidget/astrowind/blob/main/src/components/core/BasicScripts.astro

Adding a new icon and hiding it depending on the chosen theme.

Or you can also search for a component made in AlpineJS, or React, Svelte or whatever framework you like, follow the steps to add the integration to Astro and start programming in that technology.

It should be noted that we are not yet completely happy with the current organization of the AstroWind code and will be doing a refactoring to make it even more flexible very soon.