Files
Atomcms-edit/resources/themes/atom/views/components/navigation/theme-mode-switcher.blade.php
T
root c53a5a8a2c Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style
- All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders
- Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel
- Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets
- Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships)
- Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs
- Rewrote login, settings, help center, radio, applications, utility pages
- All colors use CSS variables controlled by Filament theme editor
- Added Hubbly assets: banner, Frank GIF, navigation icons, online badge
- Removed all dependencies on x-content.* and x-form.* components
2026-06-27 17:01:02 +02:00

31 lines
1.7 KiB
PHP
Executable File

<button
x-data="{
toggle() {
const currentTheme = localStorage.getItem('theme') || 'light';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', newTheme);
document.cookie = 'theme=' + newTheme + ';path=/;max-age=31536000;SameSite=Lax';
if (newTheme === 'dark') {
document.documentElement.classList.add('dark');
document.body.classList.add('dark', 'dark-mode');
document.documentElement.style.cssText = 'background-color: #1a1d29 !important; color-scheme: dark;';
} else {
document.documentElement.classList.remove('dark');
document.body.classList.remove('dark', 'dark-mode');
document.documentElement.style.cssText = 'color-scheme: light;';
}
}
}"
@click="toggle()"
class="relative flex items-center justify-center text-gray-700 dark:text-white bg-white dark:bg-gray-900 rounded-full shadow-sm border border-gray-200 dark:border-gray-700 active:scale-95 transition-transform"
style="width: 40px; height: 40px; min-width: 40px;"
aria-label="Toggle theme">
<svg class="w-5 h-5 hidden dark:block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<svg class="w-5 h-5 block dark:hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</button>