Skip to content

Commit 91159d0

Browse files
rellivrelliv
committed
feat: add dark mode support with theme toggle and persistent preference
1 parent eba8327 commit 91159d0

File tree

1 file changed

+49
-11
lines changed

1 file changed

+49
-11
lines changed

‎resources/views/index.blade.php‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,32 @@
2424
}
2525
</script>
2626
</head>
27-
<body class="h-screen overflow-hidden flex flex-col bg-gray-50">
27+
<body class="h-screen overflow-hidden flex flex-col bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
2828
<div class="flex flex-col h-screen p-4">
2929
<div class="flex-none mb-4">
30-
<div class="flex flex-row gap-3 items-center text-2xl font-semibold">
31-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
32-
<path d="M11.2019 4.17208C11.711 3.94264 12.289 3.94264 12.7981 4.17208L21.3982 8.04851C22.2006 8.41016 22.2006 9.58984 21.3982 9.95149L12.7981 13.8279C12.289 14.0574 11.711 14.0574 11.2019 13.8279L2.60175 9.95149C1.79941 9.58984 1.79942 8.41016 2.60176 8.04851L11.2019 4.17208Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
33-
<path d="M20.1813 13.5L21.3982 14.0485C22.2006 14.4102 22.2006 15.5898 21.3982 15.9515L12.7981 19.8279C12.289 20.0574 11.711 20.0574 11.2019 19.8279L2.60175 15.9515C1.79941 15.5898 1.79942 14.4102 2.60176 14.0485L3.81867 13.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
30+
<div class="flex flex-row justify-between items-center">
31+
<div class="flex flex-row gap-3 items-center text-2xl font-semibold text-gray-800 dark:text-gray-200">
32+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="text-gray-800 dark:text-gray-200" fill="none">
33+
<path d="M11.2019 4.17208C11.711 3.94264 12.289 3.94264 12.7981 4.17208L21.3982 8.04851C22.2006 8.41016 22.2006 9.58984 21.3982 9.95149L12.7981 13.8279C12.289 14.0574 11.711 14.0574 11.2019 13.8279L2.60175 9.95149C1.79941 9.58984 1.79942 8.41016 2.60176 8.04851L11.2019 4.17208Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
34+
<path d="M20.1813 13.5L21.3982 14.0485C22.2006 14.4102 22.2006 15.5898 21.3982 15.9515L12.7981 19.8279C12.289 20.0574 11.711 20.0574 11.2019 19.8279L2.60175 15.9515C1.79941 15.5898 1.79942 14.4102 2.60176 14.0485L3.81867 13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
3435
</svg>
3536

3637
<span>
3738
Artisan Commands: {{ config('app.env') }}
3839
</span>
40+
</div>
41+
42+
<!-- Dark mode toggle -->
43+
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 transition-colors">
44+
<!-- Sun icon for dark mode -->
45+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
46+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
47+
</svg>
48+
<!-- Moon icon for light mode -->
49+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 block dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
50+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
51+
</svg>
52+
</button>
3953
</div>
4054
</div>
4155

@@ -46,15 +60,15 @@
4660
<div class="inline-flex gap-4">
4761
@foreach($commands as $group => $groupCommands)
4862
@if(count($groupCommands) > 0)
49-
<div class="flex-none w-[300px] bg-white p-4 rounded-lg border border-gray-200 h-[43vh] overflow-y-auto">
50-
<div class="text-base font-semibold mb-3 text-gray-700 sticky top-0 bg-white py-2 border-b-2 border-gray-200">
63+
<div class="flex-none w-[300px] bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 h-[43vh] overflow-y-auto">
64+
<div class="text-base font-semibold mb-3 text-gray-700 dark:text-gray-300 sticky top-0 bg-white dark:bg-gray-800 py-2 border-b-2 border-gray-200 dark:border-gray-700">
5165
{{ $group }}
5266
</div>
5367
<div class="space-y-2">
5468
@foreach($groupCommands as $command)
5569
<div>
5670
<button
57-
class="w-full px-2 py-1 text-sm text-left border border-blue-500 text-blue-500 hover:bg-blue-50 rounded truncate transition-colors command-btn"
71+
class="w-full px-2 py-1 text-sm text-left border border-blue-500 text-blue-500 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded truncate transition-colors command-btn"
5872
data-command="{{ $command['command'] }}"
5973
data-tooltip="{{ $command['description'] }}"
6074
>
@@ -84,7 +98,7 @@ class="w-full px-2 py-1 text-sm text-left border border-blue-500 text-blue-500 h
8498
</div>
8599
</div>
86100

87-
<div id="tooltip" class="absolute hidden z-50 max-w-xs bg-gray-900 text-white text-sm rounded-md px-3 py-2"></div>
101+
<div id="tooltip" class="absolute hidden z-50 max-w-xs bg-gray-900 dark:bg-gray-700 text-white text-sm rounded-md px-3 py-2"></div>
88102

89103
<script>
90104
document.addEventListener('DOMContentLoaded', function() {
@@ -166,12 +180,36 @@ class="w-full px-2 py-1 text-sm text-left border border-blue-500 text-blue-500 h
166180
document.getElementById('command-status').innerHTML = '';
167181
});
168182
183+
// Dark mode toggle functionality
184+
const themeToggle = document.getElementById('theme-toggle');
185+
186+
// Check for saved theme preference or use the system preference
187+
if (localStorage.getItem('color-theme') === 'dark' ||
188+
(!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
189+
document.documentElement.classList.add('dark');
190+
} else {
191+
document.documentElement.classList.remove('dark');
192+
}
193+
194+
// Toggle dark mode on button click
195+
themeToggle.addEventListener('click', function() {
196+
// Toggle dark class on html element
197+
document.documentElement.classList.toggle('dark');
198+
199+
// Update localStorage
200+
if (document.documentElement.classList.contains('dark')) {
201+
localStorage.setItem('color-theme', 'dark');
202+
} else {
203+
localStorage.setItem('color-theme', 'light');
204+
}
205+
});
206+
169207
// Alert function
170208
function showAlert(type, message) {
171209
const alertDiv = document.getElementById('output-global');
172210
alertDiv.className = `fixed top-4 right-4 z-50 max-w-sm p-4 rounded-lg ${
173-
type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' :
174-
'bg-red-100 text-red-800 border border-red-200'
211+
type === 'success' ? 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800' :
212+
'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-800'
175213
}`;
176214
alertDiv.innerHTML = message;
177215
alertDiv.style.display = 'block';

0 commit comments

Comments
 (0)