Added Dark Mode For ImageSequencer

examples/index.html

@@ -25,6 +25,7 @@
   <script src="../node_modules/jquery/dist/jquery.min.js"></script>
   <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="../src/ui/prepareDynamic.js"></script>
+  <script src="../src/ui/toggleTheme.js"></script>
   <script src="../dist/image-sequencer.js" charset="utf-8"></script>
   <script src="../dist/image-sequencer-ui.js" charset="utf-8"></script>
   <script src="../node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
@@ -55,9 +56,19 @@
   <link href="../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
   <link href="./selectize.default.css" rel="stylesheet">
   <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="theme.css">
 
   <div id="update-prompt-modal">A new version of image sequencer is available. Click <a href="#" id="reload">here</a> to update.</div>
 
+  <div>
+    <input type="checkbox" id="theme-toggler"/>
+    <label class="label" for="theme-toggler">
+      <i class="fa fa-sun-o"></i>
+      <i class="fa fa-moon-o"></i>
+      <div class="slider"></div>
+    </label>
+  </div>
+
   <div class="notify-box d-none">
     <strong>Failed To Load Image</strong>
     <button type="button" class="ml-2 mb-1 close" id="close-popup"><span>&times;</span></button>
@@ -232,7 +243,7 @@ <h2>Need Help?</h2>
         </div>
         <div class="col-md-6">
           <h2>Improve this tool</h2>
-          <p>
+          <p class="text-muted">
             This is an open source toolkit which you can help improve on Github
           </p>
           <p>

examples/theme.css

@@ -0,0 +1,67 @@
+#theme-toggler {
+	opacity: 0;
+	position: absolute;
+}
+
+.label {
+	background-color: #445;
+	border-radius: 50px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 5px;
+	position: relative;
+	height: 2.6rem;
+	width: 5rem;
+	transform: scale(1.5);
+}
+
+.label .slider {
+	background-color: #fff;
+	border-radius: 50%;
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	height: 22px;
+	width: 22px;
+	transform: translateX(0px);
+	transition: transform 0.2s linear;
+}
+
+#theme-toggler:checked + .label .slider {
+	transform: translateX(24px);
+}
+
+.fa-moon-o {
+    font-size:1.4rem;
+	color: #f39c12;
+}
+
+.fa-sun-o {
+    font-size:1.4rem;
+	color: #f39c12;
+}
+
+/* main stuff to be darkened */
+
+body.dark-theme{
+	background-color: #292C35;
+}
+
+.dark-theme {
+	color: #000;
+}
+
+.dark-theme-spec {
+	color: #fff;
+}
+
+h2.dark-theme,h1 a.dark-theme {
+	color: #0ad7fa;
+	/* color: #fa9b0a; */
+}
+
+div.dark-panel-theme {
+	color: #808080;
+}

src/ui/toggleTheme.js

@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded',function() {
+    document.getElementById('theme-toggler').addEventListener('change',function() {
+
+        let color,bgcolor,sepColor;
+
+        document.querySelector('body').classList.toggle('dark-theme');
+        document.querySelector('.name-header').classList.toggle('dark-theme');
+
+        document.querySelectorAll('h2').forEach(function(heading) {
+            heading.classList.toggle('dark-theme');
+        });
+
+        document.querySelector('header').classList.toggle('dark-theme-spec');
+        document.querySelector('#dropzone-text i').classList.toggle('dark-theme-spec');
+        document.querySelector('.text-muted').classList.toggle('dark-theme-spec');
+
+        document.querySelector('div.panel-body').classList.toggle('dark-theme');
+        document.querySelector('input[type="file"]').classList.toggle('dark-theme-spec');
+
+        if(document.getElementById('version-number-top-right').className.indexOf('dark-theme-spec') == -1){
+            color = '#fff';
+            bgcolor = '#fff';
+            sepColor = '#000';
+        }
+        else{
+            color = '#808080';
+            bgcolor = '#000';
+            sepColor = '#fff';
+        }
+
+        document.getElementById('update-prompt-modal').style.backgroundColor = bgcolor;
+        document.getElementById('update-prompt-modal').style.color = sepColor;
+        document.getElementById('version-number-top-right').style.color = color;
+        document.getElementById('version-number-text').style.color = color;
+        document.querySelector('#move-up i').style.color = color;
+
+        document.getElementById('version-number-top-right').classList.toggle('dark-theme-spec');
+        document.getElementById('update-prompt-modal').classList.toggle('dark-theme-spec');
+        document.getElementById('version-number-text').classList.toggle('dark-theme-spec');
+        document.querySelector('#move-up i').classList.toggle('dark-theme-spec');
+    });
+});