[PR #1156] [CLOSED] fix: improve ANSI color contrast in dark mode logs #11663

New Issue

GiteaMirror · 2026-05-12T21:51:19-05:00

GiteaMirror commented

2026-05-12 21:51:19 -05:00

📋 Pull Request Information

Original PR: https://github.com/moghtech/komodo/pull/1156
Author: @litlmike
Created: 2/6/2026
Status: ❌ Closed

Base: main ← Head: fix-issue-1049

📝 Commits (1)

e3c8a20 fix: improve ANSI color contrast in dark mode logs

📊 Changes

9 files changed (+60 additions, -15 deletions)

View changed files

📝 frontend/src/components/log.tsx (+3 -1)
📝 frontend/src/components/resources/action/index.tsx (+3 -1)
📝 frontend/src/components/resources/action/info.tsx (+4 -2)
📝 frontend/src/components/resources/build/info.tsx (+5 -3)
📝 frontend/src/components/resources/procedure/index.tsx (+3 -1)
📝 frontend/src/components/resources/resource-sync/info.tsx (+3 -1)
📝 frontend/src/components/resources/stack/info.tsx (+3 -1)
📝 frontend/src/components/updates/details.tsx (+4 -2)
📝 frontend/src/lib/utils.ts (+32 -3)

📄 Description

Summary

Fixes #1049 - Dark mode makes colored logs unreadable

Problem

Dark blue ANSI text (#0000AA) was invisible against dark mode backgrounds, making logs with colored output (like Docker build logs, npm logs, etc.) unreadable.

Solution

Added a theme-aware ANSI color palette that automatically adjusts colors based on the current theme:

Light mode: Uses the default ANSI colors (unchanged behavior)
Dark mode: Uses a custom high-contrast palette based on GitHub's dark mode terminal colors

Key color changes in dark mode:

Color	Original	Dark Mode
Blue	#0000AA	#79C0FF
Red	#AA0000	#FF7B72
Green	#00AA00	#7EE787
Yellow	#AA5500	#FFA657
Magenta	#AA00AA	#D2A8FF
Cyan	#00AAAA	#56D4DD
Black	#000000	#6E7681

Changes:

Modified \rontend/src/lib/utils.ts:
- Added \darkModeColors\ palette for ANSI colors 0-15
- Created separate converters for light and dark modes
- Updated \logToHtml\ and \updateLogToHtml\ to accept optional theme parameter
Updated all components that display logs:
- \log.tsx\
- \ction/index.tsx, \ction/info.tsx\
- \uild/info.tsx\
- \procedure/index.tsx\
- esource-sync/info.tsx\
- \stack/info.tsx\
- \updates/details.tsx\

Testing

Verified all updated components use the theme-aware color conversion
Backwards compatible: defaults to light mode colors when theme is not specified

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/moghtech/komodo/pull/1156 **Author:** [@litlmike](https://github.com/litlmike) **Created:** 2/6/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix-issue-1049` --- ### 📝 Commits (1) - [`e3c8a20`](https://github.com/moghtech/komodo/commit/e3c8a20cea0a29d6e9799b370e07dd7997e1d24e) fix: improve ANSI color contrast in dark mode logs ### 📊 Changes **9 files changed** (+60 additions, -15 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/components/log.tsx` (+3 -1) 📝 `frontend/src/components/resources/action/index.tsx` (+3 -1) 📝 `frontend/src/components/resources/action/info.tsx` (+4 -2) 📝 `frontend/src/components/resources/build/info.tsx` (+5 -3) 📝 `frontend/src/components/resources/procedure/index.tsx` (+3 -1) 📝 `frontend/src/components/resources/resource-sync/info.tsx` (+3 -1) 📝 `frontend/src/components/resources/stack/info.tsx` (+3 -1) 📝 `frontend/src/components/updates/details.tsx` (+4 -2) 📝 `frontend/src/lib/utils.ts` (+32 -3) </details> ### 📄 Description ## Summary Fixes #1049 - Dark mode makes colored logs unreadable ## Problem Dark blue ANSI text (#0000AA) was invisible against dark mode backgrounds, making logs with colored output (like Docker build logs, npm logs, etc.) unreadable. ## Solution Added a theme-aware ANSI color palette that automatically adjusts colors based on the current theme: - **Light mode**: Uses the default ANSI colors (unchanged behavior) - **Dark mode**: Uses a custom high-contrast palette based on GitHub's dark mode terminal colors ### Key color changes in dark mode: | Color | Original | Dark Mode | |-------|----------|-----------| | Blue | #0000AA | #79C0FF | | Red | #AA0000 | #FF7B72 | | Green | #00AA00 | #7EE787 | | Yellow | #AA5500 | #FFA657 | | Magenta | #AA00AA | #D2A8FF | | Cyan | #00AAAA | #56D4DD | | Black | #000000 | #6E7681 | ### Changes: - Modified \rontend/src/lib/utils.ts\: - Added \darkModeColors\ palette for ANSI colors 0-15 - Created separate converters for light and dark modes - Updated \logToHtml\ and \updateLogToHtml\ to accept optional theme parameter - Updated all components that display logs: - \log.tsx\ - \ction/index.tsx\, \ction/info.tsx\ - \uild/info.tsx\ - \procedure/index.tsx\ - \ esource-sync/info.tsx\ - \stack/info.tsx\ - \updates/details.tsx\ ## Testing - Verified all updated components use the theme-aware color conversion - Backwards compatible: defaults to light mode colors when theme is not specified --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-05-12 21:51:19 -05:00

GiteaMirror closed this issue

2026-05-12 21:51:20 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/komodo#11663