dark mode

assets/app.js

 require('./app.scss');
-require('@fortawesome/fontawesome-free/css/all.min.css');
 
+import './theme.js';
 import $ from "jquery";
 import 'bootstrap';

assets/app.scss

+.theme-switch {
+  display: inline-block;
+  height: 24px;
+  position: relative;
+  width: 50px;
+}
+
+.theme-switch input {
+  display: none;
+}
+
+.slider {
+  background-color: #ccc;
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: 400ms;
+}
+
+.slider::before {
+  background-color: #fff;
+  bottom: 4px;
+  content: "";
+  height: 16px;
+  left: 4px;
+  position: absolute;
+  transition: 400ms;
+  width: 16px;
+}
+
+input:checked + .slider {
+  background-color: #66bb6a;
+}
+
+input:checked + .slider::before {
+  transform: translateX(26px);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round::before {
+  border-radius: 50%;
+}

assets/theme.js

+var toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
+var currentTheme = localStorage.getItem('theme');
+var mainHeader = document.querySelector('.main-header');
+
+if (currentTheme) {
+    if (currentTheme === 'dark') {
+        if (!document.body.classList.contains('dark-mode')) {
+            document.body.classList.add("dark-mode");
+        }
+        toggleSwitch.checked = true;
+    }
+}
+
+function switchTheme(e) {
+    if (e.target.checked) {
+        if (!document.body.classList.contains('dark-mode')) {
+            document.body.classList.add("dark-mode");
+        }
+        localStorage.setItem('theme', 'dark');
+    } else {
+        if (document.body.classList.contains('dark-mode')) {
+            document.body.classList.remove("dark-mode");
+        }
+        localStorage.setItem('theme', 'light');
+    }
+}
+
+toggleSwitch.addEventListener('change', switchTheme, false);