Added toggle for darkmode with simple darkmode css (#233)

rap2hpoutre · Apr 27, 2020 · 02023f5 · 02023f5
1 parent 337bb72
commit 02023f5
Showing 1 changed file with 122 additions and 0 deletions.
diff --git a/src/views/log.blade.php b/src/views/log.blade.php
@@ -67,14 +67,116 @@
       white-space: nowrap;
     }
 
+
+
+    /**
+    * DARK MODE CSS
+    */
+
+    body[data-theme="dark"] {
+      background-color: #151515;
+      color: #cccccc;
+    }
+
+    [data-theme="dark"] a {
+      color: #4da3ff;
+    }
+
+    [data-theme="dark"] a:hover {
+      color: #a8d2ff;
+    }
+
+    [data-theme="dark"] .list-group-item {
+      background-color: #1d1d1d;
+      border-color: #444;
+    }
+
+    [data-theme="dark"] a.llv-active {
+        background-color: #0468d2;
+        border-color: rgba(255, 255, 255, 0.125);
+        color: #ffffff;
+    }
+
+    [data-theme="dark"] a.list-group-item:focus, [data-theme="dark"] a.list-group-item:hover {
+      background-color: #273a4e;
+      border-color: rgba(255, 255, 255, 0.125);
+      color: #ffffff;
+    }
+
+    [data-theme="dark"] .table td, [data-theme="dark"] .table th,[data-theme="dark"] .table thead th {
+      border-color:#616161;
+    }
+
+    [data-theme="dark"] .page-item.disabled .page-link {
+      color: #8a8a8a;
+      background-color: #151515;
+      border-color: #5a5a5a;
+    }
+
+    [data-theme="dark"] .page-link {
+      background-color: #151515;
+      border-color: #5a5a5a;
+    }
+
+    [data-theme="dark"] .page-item.active .page-link {
+      color: #fff;
+      background-color: #0568d2;
+      border-color: #007bff;
+    }
+
+    [data-theme="dark"] .page-link:hover {
+      color: #ffffff;
+      background-color: #0051a9;
+      border-color: #0568d2;
+    }
+
+    [data-theme="dark"] .form-control {
+      border: 1px solid #464646;
+      background-color: #151515;
+      color: #bfbfbf;
+    }
+
+    [data-theme="dark"] .form-control:focus {
+      color: #bfbfbf;
+      background-color: #212121;
+      border-color: #4a4a4a;
+  }
+
   </style>
+
+  <script>
+    function initTheme() {
+      const darkThemeSelected =
+        localStorage.getItem('darkSwitch') !== null &&
+        localStorage.getItem('darkSwitch') === 'dark';
+      darkSwitch.checked = darkThemeSelected;
+      darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') :
+        document.body.removeAttribute('data-theme');
+    }
+
+    function resetTheme() {
+      if (darkSwitch.checked) {
+        document.body.setAttribute('data-theme', 'dark');
+        localStorage.setItem('darkSwitch', 'dark');
+      } else {
+        document.body.removeAttribute('data-theme');
+        localStorage.removeItem('darkSwitch');
+      }
+    }
+  </script>
 </head>
 <body>
 <div class="container-fluid">
   <div class="row">
     <div class="col sidebar mb-3">
       <h1><i class="fa fa-calendar" aria-hidden="true"></i> Laravel Log Viewer</h1>
       <p class="text-muted"><i>by Rap2h</i></p>
+
+      <div class="custom-control custom-switch" style="padding-bottom:20px;">
+        <input type="checkbox" class="custom-control-input" id="darkSwitch">
+        <label class="custom-control-label" for="darkSwitch" style="margin-top: 6px;">Dark Mode</label>
+      </div>
+
       <div class="list-group div-scroll">
         @foreach($folders as $folder)
           <div class="list-group-item">
@@ -191,7 +293,27 @@ class="float-right expand btn btn-outline-dark btn-sm mb-2 ml-2"
 <!-- Datatables -->
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
+
 <script>
+
+  // dark mode by https://github.com/coliff/dark-mode-switch
+  const darkSwitch = document.getElementById('darkSwitch');
+
+  // this is here so we can get the body dark mode before the page displays
+  // otherwise the page will be white for a second... 
+  initTheme();
+
+  window.addEventListener('load', () => {
+    if (darkSwitch) {
+      initTheme();
+      darkSwitch.addEventListener('change', () => {
+        resetTheme();
+      });
+    }
+  });
+
+  // end darkmode js
+        
   $(document).ready(function () {
     $('.table-container tr').on('click', function () {
       $('#' + $(this).data('display')).toggle();