From 249b2759b65fdfcd1ea9d7b0ffc2d74021ced1e6 Mon Sep 17 00:00:00 2001 From: Darko Gjorgjijoski Date: Sat, 4 Apr 2026 03:08:00 +0200 Subject: [PATCH] Fix header gradient too light in dark mode Add dedicated header-from/header-to color tokens that are independent of the primary palette dark mode overrides. Dark mode header uses a deeper indigo gradient instead of the brightened primary colors. Co-Authored-By: Claude Opus 4.6 (1M context) --- resources/css/invoiceshelf.css | 2 ++ resources/css/themes.css | 8 ++++++++ .../scripts/admin/layouts/partials/TheSiteHeader.vue | 4 ++-- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/resources/css/invoiceshelf.css b/resources/css/invoiceshelf.css index 2a39ef7a..01fe3dd9 100644 --- a/resources/css/invoiceshelf.css +++ b/resources/css/invoiceshelf.css @@ -39,6 +39,8 @@ --color-line-strong: var(--color-line-strong); --color-hover: var(--color-hover); --color-hover-strong: var(--color-hover-strong); + --color-header-from: var(--color-header-from); + --color-header-to: var(--color-header-to); /* Status badge text */ --color-status-yellow: var(--color-status-yellow); diff --git a/resources/css/themes.css b/resources/css/themes.css index 9313cab8..d322e3ae 100644 --- a/resources/css/themes.css +++ b/resources/css/themes.css @@ -32,6 +32,10 @@ --color-hover: rgb(249, 250, 251); --color-hover-strong: rgb(243, 244, 246); + /* Header gradient (fixed, not affected by dark mode) */ + --color-header-from: rgb(74, 61, 255); + --color-header-to: rgb(118, 117, 255); + /* Status badge text */ --color-status-yellow: rgb(113, 63, 18); --color-status-green: rgb(20, 83, 45); @@ -85,6 +89,10 @@ --color-alert-success-bg: rgba(20, 83, 45, 0.2); --color-alert-success-text: rgb(134, 239, 172); + /* Header gradient (darker in dark mode) */ + --color-header-from: rgb(51, 22, 255); + --color-header-to: rgb(74, 61, 255); + /* Primary adjustments for dark mode */ --color-primary-50: rgba(167, 170, 255, 0.15); --color-primary-100: rgba(167, 170, 255, 0.25); diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue index 08486da9..06369b05 100644 --- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue +++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue @@ -13,8 +13,8 @@ py-3 md:h-16 md:px-8 bg-linear-to-r - from-primary-500 - to-primary-400 + from-header-from + to-header-to " >