Search code examples
javascripthtmlcssmaterializedarkmode

Why the dark-theme colors written in the SCSS file does not apply?

I'm trying to add a dark-theme toggle button to my page, i looked up in the internet for code and i saw the example below. i copied the code to my VS code editor and when i am clicking the toggle button, it's icon changing but the window stays white

i took the code from this codepen site and removed all the non-relevant html elements: https://codepen.io/j_holtslander/pen/MRbpLX

this is the code:

// SIDENAV
$(document).ready(function() {
  $('.sidenav').sidenav();


  // SWAP ICON ON CLICK
  // Source: https://stackoverflow.com/a/34254979/751570
  $('.dark-toggle').on('click', function() {
    if ($(this).find('i').text() == 'brightness_4') {
      $(this).find('i').text('brightness_high');
    } else {
      $(this).find('i').text('brightness_4');
    }
  });

});
/* and this is the dark_mode.scss file, compiled to css */

body {
  background-color: #eee;
  transition: color 1s ease, background-color 1s ease;
}

body.dark {
  background-color: #202123;
  color: #fff;
}

body.dark nav {
  background-color: #26A69A;
}

body.dark .card {
  background-color: rgba(255, 255, 255, 0.2);
}

body.dark .btn {
  background-color: #EE6F73;
}

body.dark .divider {
  opacity: 0.2;
}

body.dark .sidenav {
  background-color: #2D2D31;
}

body.dark .sidenav li a:not(.subheader) {
  color: #89B2F5;
}

body.dark .sidenav li a:not(.subheader):hover {
  background-color: #3B4043;
}

body.dark .sidenav li a.subheader {
  color: #9AA0A6;
}

body.dark .sidenav li a .material-icons {
  color: #9AA0A6;
}

body.dark .collection {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark .collection .collection-item {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
<!DOCTYPE html>
<html lang="en">

<head>

  <script src="less.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="dark_mode.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet/less" type="text/css" href="dark_mode.scss">
  <link rel="stylesheet/less" type="text/css" href="styles.less" />

</head>
<div class="row">
  <div class="col s12">
    <a class="btn dark-toggle" href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')"
      title="Dark/light"><i class="material-icons left">brightness_4</i> Toggle Dark Mode</a>
  </div>
</div>

</html>

Solution

  • Inside your dark mode toggle function, you need to toggle the class dark on the body element. Also, in your markup, you cannot omit the body tag, it's mandatory and also, aside from head, the only child element allowed in <html>:

    $('.dark-toggle').on('click',function(){
    // OTHER STUFF
    document.body.classList.toggle('dark');
});


    // SIDENAV
$(document).ready(function() {
  // SWAP ICON ON CLICK
  // Source: https://stackoverflow.com/a/34254979/751570
  $('.dark-toggle').on('click', function() {
    if ($(this).find('i').text() == 'brightness_4') {
      $(this).find('i').text('brightness_high');
    } else {
      $(this).find('i').text('brightness_4');
    }
    document.body.classList.toggle('dark');
  });

});
    /* and this is the dark_mode.scss file, compiled to css */

body {
  background-color: #eee;
  transition: color 1s ease, background-color 1s ease;
}

body.dark {
  background-color: #202123;
  color: #fff;
}

body.dark nav {
  background-color: #26A69A;
}

body.dark .card {
  background-color: rgba(255, 255, 255, 0.2);
}

body.dark .btn {
  background-color: #EE6F73;
}

body.dark .divider {
  opacity: 0.2;
}

body.dark .sidenav {
  background-color: #2D2D31;
}

body.dark .sidenav li a:not(.subheader) {
  color: #89B2F5;
}

body.dark .sidenav li a:not(.subheader):hover {
  background-color: #3B4043;
}

body.dark .sidenav li a.subheader {
  color: #9AA0A6;
}

body.dark .sidenav li a .material-icons {
  color: #9AA0A6;
}

body.dark .collection {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark .collection .collection-item {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
    <!DOCTYPE html>
<html lang="en">

<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  
</head>

<body class="light">
  <div class="row">
    <div class="col s12">
      <a class="btn dark-toggle" href="#" title="Dark/light"><i class="material-icons left">brightness_4</i> Toggle Dark Mode</a>
    </div>
  </div>
</body>

</html>

    Note that I have removed the onclick on the toggle as that is not permitted with StackOverflows snippet setup. That part is responsible for storing the current dark/light mode setting in the locas storage of the browser, as well as restoring it from there when you come back to the page next time.