Night mode not working

GiacomoLaw 2017-07-10 14:15:31 UTC #1

Hi all

I'm following this tutorial:

I've followed it through, however when I check the box the page does not change. Here is the page code:

GiacomoLaw/pokefinder/blob/master/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Pokefinder</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/pokesprite.min.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/style.css" type="text/css" />
  <script src="js/pokesprite.min.js" type="text/javascript"></script>
  <link rel="shortcut icon" href="img/favicon.ico" />
  <!-- Google analytics -->
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-57282086-7', 'auto');
  ga('send', 'pageview');

This file has been truncated. show original

And here is the CSS:

github.com

GiacomoLaw/pokefinder/blob/master/css/style.css

.padding {
  padding-left: 10px;
}

button {
    background-color: #01b213;
    border: none;
    color: white;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 12px;
}

button:hover {
    background-color: #01700c;
}

This file has been truncated. show original

The page is here: http://giacomolaw.ne/pokefinder

Note that the checkbox is hidden on the page so users don't see it, so you'll need to go into inspector and unhide it.

What am I doing wrong?

Thanks!

GiacomoLaw 2017-07-10 17:05:59 UTC #2

Really not sure what is causing this - I've played around with it to no fix.