Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 02023f5

Browse files
authoredApr 27, 2020
Added toggle for darkmode with simple darkmode css (#233)
1 parent 337bb72 commit 02023f5

File tree

1 file changed

+122
-0
lines changed

1 file changed

+122
-0
lines changed
 

‎src/views/log.blade.php

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,116 @@
6767
white-space: nowrap;
6868
}
6969
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+
70145
</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>
71167
</head>
72168
<body>
73169
<div class="container-fluid">
74170
<div class="row">
75171
<div class="col sidebar mb-3">
76172
<h1><i class="fa fa-calendar" aria-hidden="true"></i> Laravel Log Viewer</h1>
77173
<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+
78180
<div class="list-group div-scroll">
79181
@foreach($folders as $folder)
80182
<div class="list-group-item">
@@ -191,7 +293,27 @@ class="float-right expand btn btn-outline-dark btn-sm mb-2 ml-2"
191293
<!-- Datatables -->
192294
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
193295
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
296+
194297
<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+
195317
$(document).ready(function () {
196318
$('.table-container tr').on('click', function () {
197319
$('#' + $(this).data('display')).toggle();

0 commit comments

Comments
 (0)
Please sign in to comment.