Jiseoup/showmycodePublic
EN|KO
  • 코드
  • 커밋
  • 풀 리퀘스트
← 목록으로
Merged

fix: improve PR label contrast in light mode

#13
JiseoupJiseoup · 2026년 5월 20일fix/pr-label-light-mode-contrast → main
fix
개요커밋변경된 파일

Related Issue

N/A

Changes

  • Fix PR labels being hard to read in light mode by adopting GitHub's two-tone treatment.
  • Add labelStyle() in lib/utils.ts — computes WCAG luminance and exposes --label / --label-fg CSS variables.
  • Add .gh-label in app/globals.css:
    • Light: solid background + black/white text picked by luminance.
    • Dark: color-mix tinted background with the label color as text (keeps the existing look).
  • Replace the inline color logic in the PR list and PR detail pages with labelStyle() + gh-label.

How to Verify

  1. npm run dev
  2. Open /[lang]/repository/[owner]/[repo]/pulls and a PR detail page.
  3. Toggle light mode — labels render with a solid background and readable text.
  4. Toggle dark mode — labels keep the tinted/translucent look.
  5. Try both bright (e.g. yellow) and dark (e.g. navy) labels to confirm text contrast.

Checklist

  • npm run format:check passes
  • npm run lint passes
  • npm run typecheck passes
  • npm run build passes
  • PR title follows Conventional Commits (feat:, fix:, chore:, refactor:, docs:, test:, )
i18n: