I already have a dark theme set, I'm using catppuccin's colors
What I'm trying to have it do is when a button is pressed, it switches to the light version of it
currently my code looks something like this:
#theme-toggle:checked ~ body {
background-color: #eff1f5;
color: #fff;
}
#theme-toggle:checked ~ html {
background-color: #eff1f5;
}
#theme-toggle:checked ~ .content {
background-color: #eff1f5;
}
the button itself is a checkbox that has display set to none and the label set as an svg so when you click the icon, it gets checked.
<input style="display: none;" type="checkbox" id="theme-toggle">
<label for="theme-toggle" class="theme-button">
<img class="theme-button-svg" src="./icons/half-moon.svg">
</label>
I used a similar strategy when making the menu for the site so I know it should work