Skip to content
OverviewSolutions
4
Comments
1

foolishsailor

@foolishsailor160 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • foolishsailor•160
    @foolishsailor

    If you use css variables you can create a theme that doesnt require you to use javascript to change the class name of every class. Makes for much cleaner css and JS

    :root {
  --background: hsl(0, 0%, 100%);
  --background___pattern: hsl(225, 100%, 98%);
  --background__card: hsl(227, 47%, 96%);
  --text___dark: hsl(228, 12%, 44%);
  --text___light: hsl(230, 17%, 14%);
}

[data-theme="dark"] {
  --background: hsl(230, 17%, 14%);
  --background___pattern: hsl(232, 19%, 15%);
  --background__card: hsl(228, 28%, 20%);
  --text___dark: hsl(228, 34%, 66%);
  --text___light: hsl(0, 0%, 100%);
}

body {
  background-color: var(--background)
}

    and then in JS when you want to switch to dark via the toggle

    const toggle = document.querySelector('.toggle input[type="checkbox"]');

function switchTheme(e) {
    return (e.target.checked) ? 
         document.documentElement.setAttribute('data-theme', 'dark'):
        document.documentElement.setAttribute('data-theme', 'light');
     
}

toggleSwitch.addEventListener('change', switchTheme, false);