Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki 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>

64
themes/lucentui/views/layouts/colors.blade.php
View File

@@ -1,44 +1,56 @@
<style>
/*
* Palette: "Pure Neutral Black + Neon" dark-first aesthetic.
* Dark mode is the canonical design; light mode is a retuned fallback.
* Admin-configured theme() values still take precedence over these defaults.
*/
:root {
/* Branding Colors (Light) */
--color-primary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('primary', '229 100% 64%'))) }};
--color-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('secondary', '237 33% 60%'))) }};
/* Branding Colors (Light) — electric violet + neon cyan */
--color-primary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('primary', '265 85% 55%'))) }};
--color-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('secondary', '190 85% 42%'))) }};
/* Neutral Colors - Borders, Accents... (Light) */
--color-neutral: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('neutral', '220 25% 85%'))) }};
--color-neutral: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('neutral', '220 13% 88%'))) }};
/* Text Colors (Light) */
--color-base: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('base', '0 0% 0%'))) }};
--color-muted: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('muted', '220 28% 25%'))) }};
--color-inverted: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('inverted', '100 100% 100%'))) }};
--color-base: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('base', '240 10% 10%'))) }};
--color-muted: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('muted', '240 5% 45%'))) }};
--color-inverted: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('inverted', '0 0% 100%'))) }};
/* State Colors */
--color-success: 142 71% 45%;
--color-error: 0 75% 60%;
--color-warning: 25 95% 53%;
--color-inactive: 0 0% 63%;
--color-info: 210 100% 60%;
--color-success: 152 76% 45%;
--color-error: 350 85% 55%;
--color-warning: 38 95% 55%;
--color-inactive: 220 9% 64%;
--color-info: 210 90% 55%;
/* Background Colors (Light) */
--color-background: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('background', '100 100% 100%'))) }};
--color-background-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('background-secondary', '0 0% 97%'))) }};
/* Background Colors (Light) — cooler, higher contrast */
--color-background: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('background', '220 20% 97%'))) }};
--color-background-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('background-secondary', '0 0% 100%'))) }};
}
.dark {
/* Branding Colors (Dark) */
--color-primary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-primary', '229 100% 64%'))) }};
--color-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-secondary', '237 33% 60%'))) }};
/* Branding Colors (Dark) — electric violet + neon cyan */
--color-primary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-primary', '265 90% 66%'))) }};
--color-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-secondary', '190 95% 55%'))) }};
/* Neutral Colors - Borders, Accents... (Dark) */
--color-neutral: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-neutral', '220 25% 29%'))) }};
/* Neutral Colors - Borders, Accents... (Dark) — subtle slate */
--color-neutral: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-neutral', '240 5% 18%'))) }};
/* Text Colors (Dark) */
--color-base: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-base', '100 100% 100%'))) }};
--color-muted: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-muted', '220 28% 25%'))) }};
--color-inverted: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-inverted', '220 14% 60%'))) }};
--color-base: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-base', '0 0% 98%'))) }};
--color-muted: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-muted', '240 5% 65%'))) }};
--color-inverted: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-inverted', '0 0% 4%'))) }};
/* Background Colors (Dark) */
--color-background: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-background', '221 39% 11%'))) }};
--color-background-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-background-secondary', '217 33% 16%'))) }};
/* State Colors (Dark) — brighter for contrast */
--color-success: 152 76% 55%;
--color-error: 350 90% 65%;
--color-warning: 38 95% 62%;
--color-inactive: 240 5% 45%;
--color-info: 210 90% 65%;
/* Background Colors (Dark) — near-black OLED surfaces */
--color-background: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-background', '0 0% 4%'))) }};
--color-background-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-background-secondary', '240 6% 8%'))) }};
}
</style>

1
themes/lucentui/views/layouts/colors.blade.php.bak Normal file
View File

@@ -0,0 +1 @@
{{-- Backup of colors.blade.php before Volt-inspired theme refresh --}}