Merge pull request #16 from xenleme/add-dark-light-mode-switcher

Added a dark-light theme toggle
ShravanMeena · Oct 13, 2019 · e80056e · e80056e
2 parents ecf9552 + 5bc26d3
commit e80056e
Show file tree

Hide file tree

Showing 4 changed files with 445 additions and 216 deletions.
diff --git a/dark-light-theme-toggle.js b/dark-light-theme-toggle.js
@@ -0,0 +1,11 @@
+let themeToggle = document.getElementById('themeToggle');
+
+themeToggle.addEventListener('change', () => {
+  let lightThemeEnabled = document.body.classList.toggle('light-theme');
+  localStorage.setItem('light-theme-enadled', lightThemeEnabled);
+});
+
+if (JSON.parse(localStorage.getItem('light-theme-enadled'))) {
+  document.body.classList.add('light-theme');
+  themeToggle.setAttribute('checked', 'checked');
+}
diff --git a/index.html b/index.html
@@ -9,7 +9,13 @@
 	<link href="./style.css" rel="stylesheet" type="text/css">
 	</link>
 </head>
+
 <body>
+	<div class="toggle-container">
+		<input type="checkbox" id="themeToggle">
+		<label for="themeToggle">Toggle</label>
+	</div>
+
 	<h1>JavaScript Calculator</h1>
 	<p class="warning">Don't divide by Zero.</p>
 	<div id="calculator" class="calculator">
@@ -48,7 +54,8 @@ <h1>JavaScript Calculator</h1>
 	</div>
 
 	<script src="./script.js"></script>
+	<script src="./dark-light-theme-toggle.js"></script>
 </body>
 
 
-</html>
+</html>
diff --git a/style.css b/style.css