Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

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

Browse Source 
- 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.
This commit is contained in:
Joseph.Rawlings
2026-04-22 01:43:38 -04:00
parent 68043f0416
commit 6440a24390
22 changed files with 1244 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
themes/lucentui/views/layouts/app.blade.php
View File

@@ -253,17 +253,16 @@
<x-navigation />
@if(!theme('background_image_url'))
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div class="absolute top-[50%] left-[50%] w-[300px] h-[300px] sm:w-[400px] sm:h-[400px] bg-primary rounded-full mix-blend-normal sm:mix-blend-screen filter blur-[40px] sm:blur-[120px] opacity-15 animate-pulse-optimized transform -translate-x-1/2 -translate-y-1/2"></div>
<div class="hidden sm:block absolute top-[30%] right-[30%] w-32 h-32 sm:w-48 sm:h-48 bg-primary rounded-full mix-blend-screen filter blur-[80px] sm:blur-[120px] opacity-10 animate-pulse-optimized"
style="animation-delay: -1s;"></div>
<div class="hidden md:block absolute bottom-[15%] right-[15%] w-40 h-40 sm:w-60 sm:h-60 bg-primary rounded-full mix-blend-screen filter blur-[70px] sm:blur-[100px] opacity-15 animate-pulse-optimized"
{{-- Subtle ambient gradient accents (Volt-inspired). Kept minimal so
content readability stays crisp on both desktop and mobile. --}}
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0" aria-hidden="true">
<div class="absolute top-[-10%] left-[-10%] w-[420px] h-[420px] bg-primary rounded-full filter blur-[110px] opacity-[0.10] sm:opacity-[0.14] animate-pulse-optimized"></div>
<div class="hidden md:block absolute bottom-[-15%] right-[-10%] w-[480px] h-[480px] bg-secondary rounded-full filter blur-[120px] opacity-[0.10] animate-pulse-optimized"
style="animation-delay: -2s;"></div>
<div class="hidden sm:block absolute top-[25%] left-[25%] w-[150px] h-[150px] sm:w-[200px] sm:h-[200px] bg-primary rounded-full mix-blend-screen filter blur-[60px] sm:blur-[90px] opacity-10 animate-pulse-optimized"
style="animation-delay: -3s;"></div>
<div class="hidden lg:block absolute top-[30%] right-[20%] w-[260px] h-[260px] bg-primary rounded-full filter blur-[90px] opacity-[0.06] animate-pulse-optimized"
style="animation-delay: -4s;"></div>
</div>
@endif
@@ -274,14 +273,14 @@
<div class="{{ (isset($sidebar) && $sidebar) ? 'md:ml-64 rtl:ml-0 rtl:md:mr-64' : '' }} flex min-w-0 flex-col flex-grow overflow-y-auto overflow-x-hidden">
<main class="container mt-24 mx-auto min-w-0 max-w-full px-4 sm:px-6 md:px-16 lg:px-16 relative z-10 overflow-x-auto">
<main class="w-full mt-24 mx-auto min-w-0 max-w-full px-4 sm:px-6 md:px-16 lg:px-16 relative z-10">
{{ $slot }}
</main>
<x-notification />
{{-- Same width and horizontal padding as <main> so footer aligns with page containers --}}
<div class="container relative z-0 mx-auto mb-3 min-w-0 max-w-full px-4 py-4 sm:px-6 md:px-16 lg:px-16">
<div class="w-full relative z-0 mx-auto mb-3 min-w-0 max-w-full px-4 py-4 sm:px-6 md:px-16 lg:px-16">
<x-navigation.footer />
</div>
</div>