Hydration issue when using local storage

[kestvir]

What version of astro are you using?

1.0.0-beta.44

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

Hello, I'm trying to make a new personal site with Astro. Wanted to implement dark theme switcher that looked similar to the one in astro docs. When the page is refreshed only the icon color seems to rerender instead of the whole component which is the goal. However, in my case, I get warning: className did not match. Server: "" Client: "checked".

I was wondering if this is also happening in the astro docs website and if not, how is this avoided?

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-mmowge?on=stackblitz

Participation

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