Skip to content

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

Open
HugoPBrito wants to merge 2 commits intoprowler-cloud:masterfrom
HugoPBrito:feat/ui-dark-mode-editorial
Open

feat(ui): improve dark mode contrast for editorial readability#11073
HugoPBrito wants to merge 2 commits intoprowler-cloud:masterfrom
HugoPBrito:feat/ui-dark-mode-editorial

Conversation

@HugoPBrito
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)
  • Neutral border scale bumped one tier brighter (zinc-700 / zinc-800) so cards, dividers, and table grids are visible on the new canvas
  • Inputs use a flush-with-canvas surface (#0a0a0a) framed by visible zinc-700 borders
  • 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
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 7, 2026

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
Comment thread ui/styles/globals.css
--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: #0a0a0a;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If an equivalent (or really close) color exist in tailwind i would suggest to use that

Comment thread ui/styles/globals.css
--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: #0a0a0a;
Copy link
Copy Markdown
Contributor

@pfe-nazaries pfe-nazaries May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also try this color and see if improve the contrast even more 111111

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.

2 participants