feat: add dark/light mode toggle to navigation, enhance sidebar styles, and update layout colors

- Implemented a button for toggling between dark and light modes in the navigation component.
- Adjusted sidebar width and improved active link indicators with shadows for better visibility.
- Updated layout colors for a more vibrant and cohesive theme, focusing on a "Pure Neutral Black + Neon" aesthetic.
- Refined ambient gradient accents for improved content readability across devices.
- Enhanced console layout for better responsiveness and user experience.

extensions/Servers/Proxmox/views/components/layout.blade.php

@@ -46,7 +46,32 @@
                 })">
                     <button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="group flex items-center gap-5 hover:opacity-80 transition-opacity">
                         <div class="relative flex items-center justify-center">
-                            <div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-10 flex items-center justify-center"></div>
+                            @php
+                                $initialIconName = $server->user_set_icon;
+                                $initialIconPrefix = $server->user_set_icon_prefix ?: 'ri';
+                                $initialIconComponent = null;
+                                if ($initialIconName) {
+                                    $initialIconComponent = $initialIconPrefix === 'vaadin'
+                                        ? 'vaadin-' . str_replace('_', '-', $initialIconName)
+                                        : $initialIconPrefix . '-' . $initialIconName;
+                                }
+                            @endphp
+                            @if($initialIconComponent)
+                                {{-- Server-rendered initial icon: shown while Alpine's icon state matches what was saved.
+                                     Once the user opens the modal and picks a different icon, the x-html branch takes over
+                                     (the icon-btn lookup only works after the modal template has rendered its icons). --}}
+                                <div x-show="icon === @js($initialIconName) && iconPrefix === @js($initialIconPrefix)"
+                                     :style="color ? 'color: ' + color : ''"
+                                     class="size-10 flex items-center justify-center">
+                                    <x-dynamic-component :component="$initialIconComponent" class="size-10" />
+                                </div>
+                                <div x-show="icon && !(icon === @js($initialIconName) && iconPrefix === @js($initialIconPrefix))"
+                                     :style="color ? 'color: ' + color : ''"
+                                     x-html="getIconSvg(icon, iconPrefix)"
+                                     class="size-10 flex items-center justify-center"></div>
+                            @else
+                                <div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-10 flex items-center justify-center"></div>
+                            @endif
                             <x-ri-server-line x-show="!icon" class="size-10 text-secondary" />
                             <!-- Edit indicator badge -->
                             <div class="absolute -top-1 -right-1 size-4 bg-primary/90 rounded-full flex items-center justify-center shadow-sm opacity-60 group-hover:opacity-100 transition-opacity">