Merge pull request #30 from misode/feature/dark-mode

Dark mode

custom.css

@@ -84,3 +84,98 @@ textarea.invalid:focus {
   overflow-wrap: normal;
   overflow-x: scroll;
 }
+
+body[data-style="dark"] {
+  background-color: #222529;
+}
+
+body[data-style="dark"] #source {
+  background-color: #181a1d;
+  border-color: #646b72;
+  color: #ddd;
+}
+
+body[data-style="dark"] .form-control {
+  background-color: #343a40;
+  color: #ddd;
+  border-color: #24282c;
+}
+
+body[data-style="dark"] .input-group-text {
+  background-color: #2d3236;
+  color: #fff;
+  border-color: #24282c;
+}
+
+body[data-style="dark"] .btn-outline-secondary {
+  background-color: #343a40 !important;
+  color: #ddd;
+  border-color: #24282c;
+}
+
+body[data-style="dark"] .btn-outline-dark {
+  filter: invert();
+}
+
+body[data-style="dark"] .custom-control-label {
+  color: #ddd;
+}
+
+body[data-style="dark"] .dropdown-menu {
+  background-color: #343a40;
+  color: #ddd;
+}
+
+body[data-style="dark"] .dropdown-item:hover {
+  background-color: #2d3236;
+}
+
+body[data-style="dark"] .card.bg-success {
+  background-color: #2f693e !important;
+  color: white !important;
+}
+
+body[data-style="dark"] .card.bg-light {
+  background-color: #32373c !important;
+  color: white !important;
+}
+
+body[data-style="dark"] .btn-light {
+  background-color: #282d31 !important;
+  color: white !important;
+  border-color: #282d31 !important;
+}
+
+body[data-style="dark"] .card.bg-secondary {
+  background-color: #707579 !important;
+  color: white !important;
+}
+
+body[data-style="dark"] .card.bg-info {
+  background-color: #2a707a !important;
+  color: black !important;
+}
+
+body[data-style="dark"] .card.bg-info .card.bg-info {
+  background-color: #3a929e !important;
+  color: black !important;
+}
+
+body[data-style="dark"] .card.bg-dark {
+  background-color: #4b4f54 !important;
+  color: white !important;
+}
+
+body[data-style="dark"] .card.bg-dark .card.bg-dark {
+  background-color: #565b60 !important;
+}
+
+body[data-style="dark"] .card.bg-dark .card.bg-dark .card.bg-dark {
+  background-color: #646b72 !important;
+}
+
+body[data-style="dark"] .help-tooltip {
+  background-color: #2d3236;
+  color: #fff;
+  border-color: #24282c;
+}

index.html

@@ -32,11 +32,18 @@
           </div>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="" role="button" data-toggle="dropdown">
+          <a class="nav-link dropdown-toggle mr-2" href="" role="button" data-toggle="dropdown">
             🌎 Language
           </a>
           <div id="lngList" class="dropdown-menu"></div>
         </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="" role="button" data-toggle="dropdown" data-i18n="theme"></a>
+          <div class="dropdown-menu">
+            <a class="dropdown-item" onclick="changeTheme('light')" data-i18n="theme.light"></a>
+            <a class="dropdown-item" onclick="changeTheme('dark')" data-i18n="theme.dark"></a>
+          </div>
+        </li>
       </ul>
       <span class="ml-0 ml-md-2"><a href="https://github.com/misode/loot-table" style="color: #ddd;" data-i18n="author"></a></span>
     </div>

locales/en.json

@@ -332,6 +332,9 @@
     "tabs": "Tabs",
     "term_add": "Add Term",
     "term_remove": "Remove Term",
+    "theme": "Theme",
+    "theme.light": "Light",
+    "theme.dark": "Dark",
     "title.loot-table": "Loot Table Generator",
     "title.predicate": "Predicate Generator",
     "true": "True",

view.js

@@ -32,6 +32,15 @@ function changeVersion(version) {
   });
 }
 
+changeTheme(localStorage.getItem('theme'))
+function changeTheme(theme) {
+  if (theme === null) {
+    theme = 'light';
+  }
+  $('body').attr('data-style', theme);
+  localStorage.setItem('theme', theme);
+}
+
 function updateView() {
   if (structure) {
     let {out: sourceOut, component: $component} = generateSourceAndView(table, structure);