diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index 5821b395bb..d0bbe038df 100644 --- a/ui/CHANGELOG.md +++ b/ui/CHANGELOG.md @@ -4,6 +4,10 @@ All notable changes to the **Prowler UI** are documented in this file. ## [1.29.0] (Prowler UNRELEASED) +### 🔄 Changed + +- Dark mode: pure-black canvas, pure-white primary text, and brighter border / input tokens for clearer separation between cards, tables, and inputs [(#11073)](https://github.com/prowler-cloud/prowler/pull/11073) + ### 🐞 Fixed - Compliance page now loads the most recent scan when opened from the sidebar instead of showing the "no compliance data available" alert [(#11374)](https://github.com/prowler-cloud/prowler/pull/11374) diff --git a/ui/styles/globals.css b/ui/styles/globals.css index 27474c13b7..32391a2099 100644 --- a/ui/styles/globals.css +++ b/ui/styles/globals.css @@ -86,7 +86,10 @@ --gradient-lighthouse: linear-gradient(96deg, #2ee59b 3.55%, #62dff0 98.85%); } -/* ===== DARK THEME ===== */ +/* ===== DARK THEME ===== + * Editorial contrast tweaks: pure-black canvas, pure-white primary text, + * and one tier brighter primary border for clearer element separation. + */ .dark { /* Button Colors */ --bg-button-primary: var(--color-emerald-300); @@ -103,30 +106,30 @@ --bg-neutral-map: var(--color-gray-800); /* Input Colors */ - --bg-input-primary: var(--color-neutral-900); - --border-input-primary: var(--color-neutral-800); - --border-input-primary-press: var(--color-neutral-800); + --bg-input-primary: #111111; + --border-input-primary: var(--color-zinc-700); + --border-input-primary-press: var(--color-zinc-500); --border-input-primary-pressed: #a7f3d0; - --border-input-primary-fill: var(--color-neutral-300); + --border-input-primary-fill: var(--color-zinc-200); /* Text Colors */ - --text-neutral-primary: var(--color-zinc-100); - --text-neutral-secondary: var(--color-zinc-300); + --text-neutral-primary: #ffffff; + --text-neutral-secondary: var(--color-zinc-200); --text-neutral-tertiary: var(--color-zinc-400); - --text-error-primary: var(--color-red-500); - --text-warning-primary: var(--color-orange-500); + --text-error-primary: var(--color-red-400); + --text-warning-primary: var(--color-orange-400); --text-success-primary: var(--color-green-500); /* Border Colors */ --border-error-primary: var(--color-red-400); - --border-neutral-primary: var(--color-zinc-800); - --border-neutral-secondary: var(--color-zinc-900); - --border-neutral-tertiary: var(--color-zinc-900); + --border-neutral-primary: var(--color-zinc-700); + --border-neutral-secondary: var(--color-zinc-800); + --border-neutral-tertiary: var(--color-zinc-700); --border-tag-primary: var(--color-slate-700); - --border-data-emphasis: rgba(255, 255, 255, 0.1); + --border-data-emphasis: rgba(255, 255, 255, 0.14); /* Background Colors */ - --bg-neutral-primary: var(--color-zinc-950); + --bg-neutral-primary: #000000; --bg-neutral-secondary: var(--color-stone-950); --bg-neutral-tertiary: #121110; --bg-tag-primary: var(--color-slate-950); diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index dc1d6cc9f7..2be6f0132b 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -178,7 +178,8 @@ module.exports = { foreground: "#000000", }, focus: "#6ee7b7", - background: "#09090B", + background: "#000000", + foreground: "#ffffff", }, }, light: {