|
67 | 67 | white-space: nowrap;
|
68 | 68 | }
|
69 | 69 |
|
| 70 | +
|
| 71 | +
|
| 72 | + /** |
| 73 | + * DARK MODE CSS |
| 74 | + */ |
| 75 | +
|
| 76 | + body[data-theme="dark"] { |
| 77 | + background-color: #151515; |
| 78 | + color: #cccccc; |
| 79 | + } |
| 80 | +
|
| 81 | + [data-theme="dark"] a { |
| 82 | + color: #4da3ff; |
| 83 | + } |
| 84 | +
|
| 85 | + [data-theme="dark"] a:hover { |
| 86 | + color: #a8d2ff; |
| 87 | + } |
| 88 | +
|
| 89 | + [data-theme="dark"] .list-group-item { |
| 90 | + background-color: #1d1d1d; |
| 91 | + border-color: #444; |
| 92 | + } |
| 93 | +
|
| 94 | + [data-theme="dark"] a.llv-active { |
| 95 | + background-color: #0468d2; |
| 96 | + border-color: rgba(255, 255, 255, 0.125); |
| 97 | + color: #ffffff; |
| 98 | + } |
| 99 | +
|
| 100 | + [data-theme="dark"] a.list-group-item:focus, [data-theme="dark"] a.list-group-item:hover { |
| 101 | + background-color: #273a4e; |
| 102 | + border-color: rgba(255, 255, 255, 0.125); |
| 103 | + color: #ffffff; |
| 104 | + } |
| 105 | +
|
| 106 | + [data-theme="dark"] .table td, [data-theme="dark"] .table th,[data-theme="dark"] .table thead th { |
| 107 | + border-color:#616161; |
| 108 | + } |
| 109 | +
|
| 110 | + [data-theme="dark"] .page-item.disabled .page-link { |
| 111 | + color: #8a8a8a; |
| 112 | + background-color: #151515; |
| 113 | + border-color: #5a5a5a; |
| 114 | + } |
| 115 | +
|
| 116 | + [data-theme="dark"] .page-link { |
| 117 | + background-color: #151515; |
| 118 | + border-color: #5a5a5a; |
| 119 | + } |
| 120 | +
|
| 121 | + [data-theme="dark"] .page-item.active .page-link { |
| 122 | + color: #fff; |
| 123 | + background-color: #0568d2; |
| 124 | + border-color: #007bff; |
| 125 | + } |
| 126 | +
|
| 127 | + [data-theme="dark"] .page-link:hover { |
| 128 | + color: #ffffff; |
| 129 | + background-color: #0051a9; |
| 130 | + border-color: #0568d2; |
| 131 | + } |
| 132 | +
|
| 133 | + [data-theme="dark"] .form-control { |
| 134 | + border: 1px solid #464646; |
| 135 | + background-color: #151515; |
| 136 | + color: #bfbfbf; |
| 137 | + } |
| 138 | +
|
| 139 | + [data-theme="dark"] .form-control:focus { |
| 140 | + color: #bfbfbf; |
| 141 | + background-color: #212121; |
| 142 | + border-color: #4a4a4a; |
| 143 | + } |
| 144 | +
|
70 | 145 | </style>
|
| 146 | + |
| 147 | + <script> |
| 148 | + function initTheme() { |
| 149 | + const darkThemeSelected = |
| 150 | + localStorage.getItem('darkSwitch') !== null && |
| 151 | + localStorage.getItem('darkSwitch') === 'dark'; |
| 152 | + darkSwitch.checked = darkThemeSelected; |
| 153 | + darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : |
| 154 | + document.body.removeAttribute('data-theme'); |
| 155 | + } |
| 156 | +
|
| 157 | + function resetTheme() { |
| 158 | + if (darkSwitch.checked) { |
| 159 | + document.body.setAttribute('data-theme', 'dark'); |
| 160 | + localStorage.setItem('darkSwitch', 'dark'); |
| 161 | + } else { |
| 162 | + document.body.removeAttribute('data-theme'); |
| 163 | + localStorage.removeItem('darkSwitch'); |
| 164 | + } |
| 165 | + } |
| 166 | + </script> |
71 | 167 | </head>
|
72 | 168 | <body>
|
73 | 169 | <div class="container-fluid">
|
74 | 170 | <div class="row">
|
75 | 171 | <div class="col sidebar mb-3">
|
76 | 172 | <h1><i class="fa fa-calendar" aria-hidden="true"></i> Laravel Log Viewer</h1>
|
77 | 173 | <p class="text-muted"><i>by Rap2h</i></p>
|
| 174 | + |
| 175 | + <div class="custom-control custom-switch" style="padding-bottom:20px;"> |
| 176 | + <input type="checkbox" class="custom-control-input" id="darkSwitch"> |
| 177 | + <label class="custom-control-label" for="darkSwitch" style="margin-top: 6px;">Dark Mode</label> |
| 178 | + </div> |
| 179 | + |
78 | 180 | <div class="list-group div-scroll">
|
79 | 181 | @foreach($folders as $folder)
|
80 | 182 | <div class="list-group-item">
|
@@ -191,7 +293,27 @@ class="float-right expand btn btn-outline-dark btn-sm mb-2 ml-2"
|
191 | 293 | <!-- Datatables -->
|
192 | 294 | <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
|
193 | 295 | <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
|
| 296 | + |
194 | 297 | <script>
|
| 298 | +
|
| 299 | + // dark mode by https://github.com/coliff/dark-mode-switch |
| 300 | + const darkSwitch = document.getElementById('darkSwitch'); |
| 301 | +
|
| 302 | + // this is here so we can get the body dark mode before the page displays |
| 303 | + // otherwise the page will be white for a second... |
| 304 | + initTheme(); |
| 305 | +
|
| 306 | + window.addEventListener('load', () => { |
| 307 | + if (darkSwitch) { |
| 308 | + initTheme(); |
| 309 | + darkSwitch.addEventListener('change', () => { |
| 310 | + resetTheme(); |
| 311 | + }); |
| 312 | + } |
| 313 | + }); |
| 314 | +
|
| 315 | + // end darkmode js |
| 316 | + |
195 | 317 | $(document).ready(function () {
|
196 | 318 | $('.table-container tr').on('click', function () {
|
197 | 319 | $('#' + $(this).data('display')).toggle();
|
|
0 commit comments