starred/newznab-tmux
1
0
Fork 0
mirror of https://github.com/NNTmux/newznab-tmux.git synced 2026-08-28 17:01:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add theme switcher to user dropdown too

Browse Source
This commit is contained in:
DariusIII
2026-03-03 13:31:23 +01:00
parent ca489cb904
commit 3c04c580d2
3 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/alpine/components/theme-toggle.js
+12
View File
@@ -49,4 +49,16 @@ Alpine.data('themeRadio', () => ({
Alpine.store('theme').set(this.value);
});
});
// Dropdown and mobile theme switcher buttons
document.querySelectorAll('.dropdown-theme-btn, .mobile-theme-btn').forEach(function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
var theme = this.dataset.theme;
if (theme) {
Alpine.store('theme').set(theme);
}
});
});
})();
resources/js/alpine/stores/theme.js
+17
View File
@@ -66,6 +66,23 @@ Alpine.store('theme', {
if (toggle) {
toggle.title = this.title();
}
// Update dropdown & mobile theme switcher buttons
var self = this;
document.querySelectorAll('.dropdown-theme-btn, .mobile-theme-btn').forEach(function(btn) {
var isActive = btn.dataset.theme === self.current;
btn.classList.remove('bg-blue-600', 'text-white', 'text-gray-300', 'hover:bg-gray-800', 'hover:bg-gray-700', 'hover:text-white');
if (isActive) {
btn.classList.add('bg-blue-600', 'text-white');
} else {
btn.classList.add('text-gray-300', 'hover:text-white');
if (btn.classList.contains('mobile-theme-btn')) {
btn.classList.add('hover:bg-gray-700');
} else {
btn.classList.add('hover:bg-gray-800');
}
}
});
},
icon() {
resources/views/partials/header-menu.blade.php
+51
View File
@@ -250,6 +250,32 @@
</a>
@endif
<div class="border-t border-gray-700"></div>
<!-- Theme Switcher -->
<div class="px-4 py-2">
<span class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Theme</span>
<div class="flex items-center gap-1" id="dropdown-theme-switcher">
@php $currentTheme = auth()->user()->theme_preference ?? 'light'; @endphp
<button type="button" data-theme="light"
class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'light' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
title="Light Mode">
<i class="fas fa-sun"></i>
<span>Light</span>
</button>
<button type="button" data-theme="dark"
class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'dark' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
title="Dark Mode">
<i class="fas fa-moon"></i>
<span>Dark</span>
</button>
<button type="button" data-theme="system"
class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'system' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
title="System (Auto)">
<i class="fas fa-desktop"></i>
<span>Auto</span>
</button>
</div>
</div>
<div class="border-t border-gray-700"></div>
<a href="{{ route('profile') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
<i class="fa fa-user fa-fw mr-2"></i>Profile
</a>
@@ -402,6 +428,31 @@
<i class="fa fa-cogs fa-fw mr-3 text-gray-400"></i>Admin
</a>
@endif
<!-- Mobile Theme Switcher -->
<div class="px-4 py-2.5">
<span class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Theme</span>
<div class="flex items-center gap-1.5" id="mobile-theme-switcher">
@php $mobileTheme = auth()->user()->theme_preference ?? 'light'; @endphp
<button type="button" data-theme="light"
class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'light' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
title="Light Mode">
<i class="fas fa-sun"></i>
<span>Light</span>
</button>
<button type="button" data-theme="dark"
class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'dark' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
title="Dark Mode">
<i class="fas fa-moon"></i>
<span>Dark</span>
</button>
<button type="button" data-theme="system"
class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'system' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
title="System (Auto)">
<i class="fas fa-desktop"></i>
<span>Auto</span>
</button>
</div>
</div>
</div>
@endauth
</div>