Social Media Dashboard Using CSS Flexbox and JS

Community feedback

• 

  foolishsailor•160

  @foolishsailorPosted over 4 years ago

  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);
  

  0