I’m Wren (they/them). I’m a programmer and cybersecurity student. I have a blog I don’t update enough.

  • 4 Posts
  • 12 Comments
Joined 2 years ago
cake
Cake day: September 1st, 2024

help-circle









  • 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