All comments

aashish-cloud•515

@aashish-cloudSubmitted over 4 years ago

I will be grateful for any recommendation that help improve this further. Thank you :)

Social Media Dashboard Using CSS Flexbox and JS

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