Skip to content

feat(ui): improve dark mode contrast for editorial readability#11073

Merged
HugoPBrito merged 6 commits into
prowler-cloud:masterfrom
HugoPBrito:feat/ui-dark-mode-editorial
May 27, 2026
Merged

feat(ui): improve dark mode contrast for editorial readability#11073
HugoPBrito merged 6 commits into
prowler-cloud:masterfrom
HugoPBrito:feat/ui-dark-mode-editorial

Conversation

@HugoPBrito

@HugoPBrito HugoPBrito commented May 7, 2026

Copy link
Copy Markdown
Member

Context

Dark mode on master uses near-black surfaces (zinc-950, stone-950) and dim borders (zinc-800/900) that flatten cards, tables, and inputs into the canvas. This PR tightens dark-theme contrast so elements read clearly without touching light mode, brand colours, or any component code.

Description

Token-only changes scoped to .dark in ui/styles/globals.css and the HeroUI dark theme in ui/tailwind.config.js:

  • Canvas anchored to pure black (#000000) with pure-white primary text (#ffffff); secondary text bumped to zinc-200 for readability on the new canvas
  • Neutral border scale bumped one tier brighter (zinc-700 / zinc-800) so cards, dividers, and table grids are visible on the new canvas; border-data-emphasis opacity raised from 0.1 to 0.14
  • Inputs use a near-black surface (#111111) framed by visible zinc-700 borders, with zinc-500 on press/focus for a clear active state
  • Brighter accent text in dark (red-400, orange-400) keeps error / warning states readable on #000
  • HeroUI dark background synced to #000000 and foreground to #ffffff so HeroUI components match the CSS tokens

Light mode and brand colours (mint primary, focus, pass / success greens) are untouched. Diff is 19 lines added, 15 modified across two files; no component, type, or behaviour changes.

Steps to review

  1. cd ui && pnpm install && pnpm run dev
  2. Sign in and toggle theme to Dark from the header
  3. Navigate Findings, Compliance, Providers, Scans — confirm: black canvas, defined card / table borders, readable secondary text, clear input boundaries
  4. Toggle to Light — confirm visual parity with master

Checklist

Community Checklist
  • This feature/issue is listed in here or roadmap.prowler.com
  • Is it assigned to me, if not, request it via the issue/feature in here or Prowler Community Slack

UI

  • All issue/task requirements work as expected on the UI
  • Screenshots/Video - Mobile (X < 640px)
  • Screenshots/Video - Tablet (640px > X < 1024px)
  • Screenshots/Video - Desktop (X > 1024px)
  • Ensure new entries are added to ui/CHANGELOG.md

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

- Pure-black canvas (#000) and pure-white primary text
- Brighter input and border tokens for clearer element separation
- Sync HeroUI dark theme background and foreground with new tokens
@HugoPBrito HugoPBrito requested a review from a team as a code owner May 7, 2026 10:24
@github-actions

github-actions Bot commented May 7, 2026

Copy link
Copy Markdown
Contributor

Conflict Markers Resolved

All conflict markers have been successfully resolved in this pull request.

@pfe-nazaries pfe-nazaries self-requested a review May 8, 2026 07:31
pfe-nazaries
pfe-nazaries previously approved these changes May 8, 2026
Comment thread ui/styles/globals.css Outdated
Comment thread ui/styles/globals.css Outdated
@alejandrobailo alejandrobailo added the no-merge Please, DO NOT MERGE this PR. label May 11, 2026
@alejandrobailo

Copy link
Copy Markdown
Contributor

This is something that has to be designed by Brad, and later discussed. Impacting all designs in Figma.
Don't merge this PR @HugoPBrito, let's talk about this soon.

@alejandrobailo alejandrobailo removed the no-merge Please, DO NOT MERGE this PR. label May 21, 2026
@HugoPBrito

Copy link
Copy Markdown
Member Author

Before:

image

After:

image

pfe-nazaries
pfe-nazaries previously approved these changes May 26, 2026
@HugoPBrito HugoPBrito merged commit f1cdf3d into prowler-cloud:master May 27, 2026
25 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants