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

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 >
  <div >
    <a  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 >brightness_4</i> Toggle Dark Mode</a>
  </div>
</div>

</html>

CodePudding user response：

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 >
  <div >
    <div >
      <a  href="#" title="Dark/light"><i >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.

CodePudding user response：

I noticed you are missing the body tag in the HTML document. Also in your JS file, you need to change the class so that other styles can be applied

$('.dark-toggle').on('click',function(){
   let element = $(this).find('i');
    if ( element.text() === 'brightness_4')
        element.text('brightness_high');
    else
        element.text('brightness_4');
 
    $('body').toggleClass('dark');
});