he4rt · fernanduandrade · Jun 23, 2026
diff --git a/app-modules/he4rt/resources/css/components/button.css b/app-modules/he4rt/resources/css/components/button.css
@@ -109,6 +109,6 @@
     @apply absolute inline-flex items-center justify-center;
 }
 
-.hp-button:hover .hp-button-icon {
+.hp-button:not(.hp-button-icon-only):hover .hp-button-icon {
     @apply translate-x-0.5;
 }
diff --git a/app-modules/portal/resources/views/components/layouts/app.blade.php b/app-modules/portal/resources/views/components/layouts/app.blade.php
@@ -1,9 +1,10 @@
 @props (['title' => null])
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
     <link rel="icon" href="{{ asset('favicon.ico') }}" />
     <title>{{ $title ? $title . ' - ' : '' }}{{ config('app.name') }}</title>
     @vite (['app-modules/he4rt/resources/css/theme.css'])

diff --git a/app-modules/portal/resources/views/components/logo.blade.php b/app-modules/portal/resources/views/components/logo.blade.php
@@ -10,7 +10,7 @@
     };
 @endphp
 
-<a href="/" {{ $attributes->class(['flex items-center gap-2']) }}>
+<a href="/" {{ $attributes->class(['flex items-center gap-2 text-text-high']) }}>
     <svg
         {{
             $attributes
@@ -24,5 +24,5 @@
         <path d="M445.237 0.00033551C424.91 -0.0347431 404.777 3.89304 385.996 11.5576C367.216 19.2221 350.159 30.4719 335.808 44.6594L153.391 224.398L116.915 188.45C111.983 183.761 108.048 178.15 105.341 171.946C102.633 165.741 101.207 159.067 101.145 152.314C101.084 145.56 102.388 138.862 104.983 132.611C107.577 126.359 111.409 120.68 116.255 115.904C121.101 111.128 126.864 107.352 133.207 104.795C139.55 102.239 146.347 100.953 153.2 101.014C160.052 101.074 166.825 102.48 173.12 105.148C179.416 107.816 185.109 111.694 189.867 116.555L262.856 44.6594C233.71 16.6424 194.537 1.07109 153.824 1.31914C113.11 1.56719 74.1349 17.6146 45.3431 45.9846C16.5513 74.3546 0.261527 112.762 0.0031216 152.886C-0.255283 193.01 15.5385 231.618 43.9626 260.346L153.391 368.189L511.948 14.8274C491.12 5.01981 468.32 -0.0474973 445.237 0.00033551Z" fill="currentColor" />
         <path d="M584.9 86.7579L445.237 224.433L408.76 188.45L335.808 260.345L372.284 296.293L226.379 440.084L299.332 512.015L554.665 260.381C577.296 238.07 592.355 209.395 597.769 178.303C603.183 147.21 598.687 115.228 584.9 86.7579Z" fill="currentColor" />
     </svg>
-    <span class="text-lg font-bold text-white">He4rt Devs</span>
+    <span class="text-lg font-bold">He4rt Devs</span>
 </a>
diff --git a/app-modules/portal/resources/views/components/navbar.blade.php b/app-modules/portal/resources/views/components/navbar.blade.php
@@ -37,9 +37,9 @@ class="hp-navbar-glow pointer-events-none absolute inset-x-0 -top-3 -z-10 mx-aut
         {{-- a PILL de vidro --}}
         <nav
             :class="scrolled
-                ? 'mt-2 bg-elevation-surface/80 py-2 shadow-lg shadow-black/40'
-                : 'mt-4 bg-elevation-surface/55 py-3 shadow-md shadow-black/20'"
-            class="relative flex items-center justify-between gap-4 rounded-full px-4 ring-1 ring-white/10 backdrop-blur-xl transition-all duration-300 md:px-6"
+                ? 'mt-2 bg-elevation-surface/80 py-2 shadow-lg shadow-zinc-950/12 dark:shadow-black/40'
+                : 'mt-4 bg-elevation-surface/55 py-3 shadow-md shadow-zinc-950/8 dark:shadow-black/20'"
+            class="relative flex items-center justify-between gap-4 rounded-full px-4 ring-1 ring-zinc-950/8 backdrop-blur-xl transition-all duration-300 dark:ring-white/10 md:px-6"
         >
             <x-portal::logo size="sm" />
 
@@ -53,7 +53,7 @@ class="relative flex items-center justify-between gap-4 rounded-full px-4 ring-1
                             class="group relative rounded-full px-3 py-1.5 text-sm font-medium transition-colors {{ $link['active'] ? 'text-text-high' : 'text-text-medium hover:text-text-high' }}"
                         >
                             <span
-                                class="absolute inset-0 -z-10 rounded-full bg-white/5 transition-opacity {{ $link['active'] ? 'opacity-100' : 'opacity-0 group-hover:opacity-100' }}"
+                                class="absolute inset-0 -z-10 rounded-full bg-zinc-950/5 transition-opacity dark:bg-white/5 {{ $link['active'] ? 'opacity-100' : 'opacity-0 group-hover:opacity-100' }}"
                             ></span>
                             {{ $link['label'] }}
                             @if ($link['active'])
@@ -91,7 +91,7 @@ class="absolute -bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-[v
             <button
                 type="button"
                 @click="open = true"
-                class="text-text-high inline-flex items-center justify-center rounded-full p-2 ring-1 ring-white/10 transition hover:bg-white/5 lg:hidden"
+                class="text-text-high inline-flex items-center justify-center rounded-full p-2 ring-1 ring-zinc-950/8 transition hover:bg-zinc-950/5 dark:ring-white/10 dark:hover:bg-white/5 lg:hidden"
                 :aria-expanded="open.toString()"
                 aria-controls="mobile-drawer"
                 aria-label="Abrir menu"
@@ -122,17 +122,17 @@ class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full"
-        class="bg-elevation-surface/85 fixed inset-y-0 right-0 z-50 flex w-[82%] max-w-sm flex-col gap-6 overflow-y-auto rounded-l-3xl border-l border-white/15 p-6 shadow-2xl shadow-black/50 backdrop-blur-xl lg:hidden"
+        class="bg-elevation-surface/85 fixed inset-y-0 right-0 z-50 flex w-[82%] max-w-sm flex-col gap-6 overflow-y-auto rounded-l-3xl border-l border-zinc-950/10 p-6 shadow-2xl shadow-zinc-950/20 backdrop-blur-xl dark:border-white/15 dark:shadow-black/50 lg:hidden"
         role="dialog"
         aria-modal="true"
         aria-label="Menu de navegação"
     >
-        <div class="flex items-center justify-between border-b border-white/10 pb-4">
+        <div class="flex items-center justify-between border-b border-zinc-950/10 pb-4 dark:border-white/10">
             <span class="text-text-medium text-sm font-semibold tracking-wide">Menu</span>
             <button
                 type="button"
                 @click="open = false"
-                class="text-text-high rounded-full p-2 ring-1 ring-white/10 transition hover:bg-white/5"
+                class="text-text-high rounded-full p-2 ring-1 ring-zinc-950/8 transition hover:bg-zinc-950/5 dark:ring-white/10 dark:hover:bg-white/5"
                 aria-label="Fechar menu"
             >
                 <x-filament::icon icon="heroicon-o-x-mark" class="h-5 w-5" />
@@ -151,7 +151,7 @@ class="text-text-high rounded-full p-2 ring-1 ring-white/10 transition hover:bg-
                     x-transition:enter-end="opacity-100 translate-x-0"
                     style="transition-delay: {{ 60 * $i }}ms"
                     @if ($link['active']) aria-current="page" @endif
-                    class="flex items-center justify-between rounded-xl px-3 py-3 text-base font-medium transition-colors {{ $link['active'] ? 'bg-white/5 text-text-high' : 'text-text-medium hover:bg-white/5 hover:text-text-high' }}"
+                    class="flex items-center justify-between rounded-xl px-3 py-3 text-base font-medium transition-colors {{ $link['active'] ? 'bg-zinc-950/5 text-text-high dark:bg-white/5' : 'text-text-medium hover:bg-zinc-950/5 hover:text-text-high dark:hover:bg-white/5' }}"
                 >
                     {{ $link['label'] }}
                     @if ($link['active'])
@@ -162,7 +162,7 @@ class="flex items-center justify-between rounded-xl px-3 py-3 text-base font-med
         </nav>
 
         {{-- CTAs full-width --}}
-        <div class="mt-auto flex flex-col gap-3 border-t border-white/10 pt-6">
+        <div class="mt-auto flex flex-col gap-3 border-t border-zinc-950/10 pt-6 dark:border-white/10">
             <x-he4rt::button
                 :href="route('social-links', absolute: false)"
                 variant="outline"
@@ -207,7 +207,7 @@ class="flex items-center justify-between rounded-xl px-3 py-3 text-base font-med
         width: 2px;
         height: 2px;
         border-radius: 9999px;
-        background: #fff;
+        background: color-mix(in srgb, var(--text-high) 45%, transparent);
         opacity: 0.3;
         animation: hpNavbarTwinkle 4s ease-in-out infinite;
         animation-delay: var(--d, 0s);

diff --git a/app-modules/portal/resources/views/social-links.blade.php b/app-modules/portal/resources/views/social-links.blade.php
@@ -16,6 +16,9 @@
             width: min(110vh, 150vw);
             max-width: 1100px;
         }
+        .dark .links-logo-bg {
+            opacity: 0.5;
+        }
 
         /* Entrance: the logo outline draws itself once, then the content cascades up. */
         @keyframes links-trace-draw {
@@ -45,18 +48,32 @@
         }
 
         .d-pill {
+            --accent-resolved: var(--accent-light);
             transition:
                 border-color 0.2s,
                 background-color 0.2s,
                 color 0.2s,
-                transform 0.2s;
+                transform 0.2s,
+                box-shadow 0.2s;
+            border-color: color-mix(in srgb, var(--outline-high) 18%, transparent);
+            background-color: color-mix(in srgb, var(--elevation-02dp) 78%, transparent);
+            color: var(--text-high);
             backdrop-filter: blur(6px);
+            box-shadow: 0 18px 40px color-mix(in srgb, var(--text-dark) 8%, transparent);
+        }
+        .dark .d-pill {
+            --accent-resolved: var(--accent-dark, var(--accent-light));
         }
         .d-pill:hover {
-            border-color: var(--accent);
-            color: var(--accent);
-            background-color: color-mix(in srgb, var(--accent) 12%, rgba(11, 10, 16, 0.6));
+            border-color: var(--accent-resolved);
+            color: var(--accent-resolved);
+            background-color: color-mix(
+                in srgb,
+                var(--accent-resolved) 12%,
+                color-mix(in srgb, var(--elevation-02dp) 78%, transparent)
+            );
             transform: scale(1.03);
+            box-shadow: 0 22px 44px color-mix(in srgb, var(--accent-resolved) 16%, transparent);
         }
 
         @media (prefers-reduced-motion: reduce) {
@@ -79,19 +96,19 @@
     <div
         class="relative z-10 mx-auto flex min-h-[calc(100svh-6rem)] w-full max-w-md flex-col items-center justify-center px-6"
     >
-        <p class="links-reveal text-xs font-semibold tracking-[0.3em] text-white/60 uppercase" style="
+        <p class="links-reveal text-text-medium text-xs font-semibold tracking-[0.3em] uppercase" style="
                 --i: 0;
             ">He4rt Devs</p>
-        <h1 class="links-reveal mt-3 text-center text-2xl font-bold text-white" style="--i: 1">Escolha seu canal</h1>
+        <h1 class="links-reveal text-text-high mt-3 text-center text-2xl font-bold" style="--i: 1">Escolha seu canal</h1>
 
         <nav class="mt-8 flex w-full flex-col gap-3" aria-label="Redes sociais da He4rt">
             @foreach ($links as $link)
                 <a
                     href="{{ $link->url }}"
                     target="_blank"
                     rel="noopener noreferrer"
-                    style="--accent: {{ $link->accent }}; --i: {{ $loop->index + 2 }}"
-                    class="d-pill links-reveal flex items-center justify-center gap-3 rounded-full border border-white/15 bg-white/5 px-6 py-3.5 font-medium text-white"
+                    style="--accent-light: {{ $link->accent }}; --accent-dark: {{ $link->accentDark ?? $link->accent }}; --i: {{ $loop->index + 2 }}"
+                    class="d-pill links-reveal flex items-center justify-center gap-3 rounded-full border px-6 py-3.5 font-medium"
                 >
                     <x-filament::icon :icon="$link->icon" class="h-5 w-5 shrink-0" />
                     <span>{{ $link->label }}</span>

diff --git a/app-modules/portal/src/DTOs/SocialLink.php b/app-modules/portal/src/DTOs/SocialLink.php
@@ -6,5 +6,11 @@
 
 final readonly class SocialLink
 {
-    public function __construct(public string $label, public string $url, public string $icon, public string $accent) {}
+    public function __construct(
+        public string $label,
+        public string $url,
+        public string $icon,
+        public string $accent,
+        public ?string $accentDark = null,
+    ) {}
 }
diff --git a/app-modules/portal/src/Livewire/SocialLinksPage.php b/app-modules/portal/src/Livewire/SocialLinksPage.php
@@ -21,10 +21,10 @@ public static function links(): array
     {
         return [
             new SocialLink('Discord', 'https://discord.gg/invite/he4rt', 'fab-discord', '#5865F2'),
-            new SocialLink('X (Twitter)', 'https://x.com/He4rtDevs', 'fab-x-twitter', '#FFFFFF'),
+            new SocialLink('X (Twitter)', 'https://x.com/He4rtDevs', 'fab-x-twitter', '#0F172A', '#FFFFFF'),
             new SocialLink('LinkedIn', 'https://www.linkedin.com/company/he4rt/', 'fab-linkedin', '#0A66C2'),
             new SocialLink('WhatsApp', 'https://chat.whatsapp.com/EBKjYxIodpe1x5LLExbTzK', 'fab-whatsapp', '#25D366'),
-            new SocialLink('GitHub', 'https://github.com/he4rt', 'fab-github', '#FFFFFF'),
+            new SocialLink('GitHub', 'https://github.com/he4rt', 'fab-github', '#111827', '#FFFFFF'),
         ];
     }
 

diff --git a/app-modules/portal/tests/Feature/HomepageTest.php b/app-modules/portal/tests/Feature/HomepageTest.php
@@ -4,6 +4,10 @@
 
 use function Pest\Laravel\get;
 
+beforeEach(function (): void {
+    $this->withoutVite();
+});
+
 it('responde 200 na home', function (): void {
     get('/')->assertOk();
 });
@@ -14,3 +18,13 @@
         ->assertSee('he4rt-logo', escape: false)
         ->assertSee('class="led', escape: false);
 });
+
+it('usa o layout do portal com suporte ao tema do sistema', function (): void {
+    $html = get('/')->getContent();
+    $htmlLang = str_replace('_', '-', app()->getLocale());
+
+    expect($html)->toContain('<meta name="color-scheme" content="light dark" />')
+        ->and($html)->not->toContain('<html lang="'.$htmlLang.'" class="dark">')
+        ->and($html)->toContain('flex items-center gap-2 text-text-high')
+        ->and($html)->toContain('<span class="text-lg font-bold">He4rt Devs</span>');
+});
diff --git a/app-modules/portal/tests/Feature/SocialLinksPageTest.php b/app-modules/portal/tests/Feature/SocialLinksPageTest.php
@@ -6,6 +6,10 @@
 
 use function Pest\Laravel\get;
 
+beforeEach(function (): void {
+    $this->withoutVite();
+});
+
 it('responde 200 em /redes', function (): void {
     get('/redes')->assertOk();
 });
@@ -40,7 +44,10 @@
     $html = get('/redes')->getContent();
 
     expect($html)->toContain('Escolha seu canal');
-    expect(mb_substr_count($html, '--accent:'))->toBe(5);
+    expect(mb_substr_count($html, '--accent-light:'))->toBe(5);
+    expect(mb_substr_count($html, '--accent-dark:'))->toBe(5);
+    expect($html)->toContain('--accent-light: #0F172A; --accent-dark: #FFFFFF;')
+        ->and($html)->toContain('--accent-light: #111827; --accent-dark: #FFFFFF;');
 });
 
 it('expõe o link de Redes sociais na navbar', function (): void {
@@ -55,3 +62,15 @@
         ->assertSee('links-reveal', escape: false)
         ->assertSee('links-trace-draw', escape: false);
 });
+
+it('usa cores compatíveis com light mode na página de redes', function (): void {
+    $html = get('/redes')->getContent();
+
+    expect($html)->toContain('text-text-high')
+        ->and($html)->toContain('flex items-center gap-2 text-text-high')
+        ->and($html)->toContain('<span class="text-lg font-bold">He4rt Devs</span>')
+        ->and($html)->toContain('background-color: color-mix(')
+        ->and($html)->not->toContain('text-white/60')
+        ->and($html)->not->toContain('text-white')
+        ->and($html)->not->toContain('bg-white/5 px-6 py-3.5');
+});