DavidSairai/dark-light-mode-switcher.markdown

## dark-light-mode-switcher.markdown

      
    Raw
  

              dark-light-mode-switcher.markdown
            
          
    Dark -Light Mode Switcher

A Pen by David Sairai on CodePen.
License.

  
## index.html
<body id="body" class="dark-mode">
  <h1>Dark/Light Mode Switcher</h1>

  <button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">🌛</button>

  <p>Just press the button above to toggle!</p>

## script.js
function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

## style.scss
$dark-color: #111;
$light-color: #eee;

body.dark-mode {
  background-color: $dark-color;
  color: $light-color;
  a {
    color: $dark-color;
  }
  button {
    background-color: $light-color;
    color: $dark-color;
  }
}

body.light-mode {
  background-color: $light-color;
  color: $dark-color;
  a {
    color: $dark-color;
  }
  button {
    background-color: $dark-color;
    color: $light-color;
  }
}
	<body id="body" class="dark-mode">
	<h1>Dark/Light Mode Switcher</h1>

	<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">🌛</button>

	<p>Just press the button above to toggle!</p>
	function toggleDarkLight() {
	var body = document.getElementById("body");
	var currentClass = body.className;
	body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
	}
	$dark-color: #111;
	$light-color: #eee;

	body.dark-mode {
	background-color: $dark-color;
	color: $light-color;
	a {
	color: $dark-color;
	}
	button {
	background-color: $light-color;
	color: $dark-color;
	}
	}

	body.light-mode {
	background-color: $light-color;
	color: $dark-color;
	a {
	color: $dark-color;
	}
	button {
	background-color: $dark-color;
	color: $light-color;
	}
	}