Skip to content

Conversation

@crayonpeenut
Copy link

Closes #139

Dark mode UI Updated

기존 UI의 이슈

  • 영역구분이 원할하지 않은 각 색상의 대비값
  • 변수가 아닌 색상값으로 색상 일괄 조정의 어려움
  • 전체적인 톤 보정 필요

수정한 UI 요소

  • 어두운 청록 계열로 전체적인 톤 보정
  • 색상의 채도/ 명도 대비값 조정으로 영역 명확히 구분
  • 'devup.json' 페이지 속 색상 변수값을 서비스 페이지 전체에 적용
  • 토글/ 컴포넌트 영역별 색상 변수값 명명

CCEE2B23-7715-4CE5-89F7-1BE7586515DA_1_105_c

4E96A74C-5DA0-4BB4-BC7D-877EDB3DE392

@codecov
Copy link

codecov bot commented Jan 25, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
see 4 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Contributor

Changepacks

}
style={{
backgroundColor: 'var(--primary)',
backgroundColor: 'var(--toggleBg)',
Copy link
Contributor

Choose a reason for hiding this comment

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

className={css({bg: "$toggleBg"})} 로 개선이 가능하면 개선을 바랍니다.

Comment on lines +30 to +38
"primary": "#F0F4E1",
"secondary": "#A1BEBF",
"link": "#BA99FF",
"text": "#F0F4E1",
"background": "#011919",
"containerBackground": "#022322",
"border": "#013936",
"success": "#009F99",
"warning": "#E9FF66",
Copy link
Contributor

Choose a reason for hiding this comment

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

primary color 등 전체적인 톤은 설계가 된 것이라서 변경이 힘들 것 같습니다. (전체적인 톤은 색맹을 고려한 디자인 색입니다.)

Copy link
Author

Choose a reason for hiding this comment

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

그렇군요! 그럼 색감 조정이 아니라 기존 컬러칩의 사용영역을 조정해놔야겠네요!

<TestCaseCircle key={text + idx} isSuccess={isSuccess}>
<Box minW="50vw" w="100%" whiteSpace="pre-wrap">
<Text color="#FFF" typography="body">
<Text color="$testCaseText" typography="body">
Copy link
Contributor

Choose a reason for hiding this comment

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

good

key={index + 'desktop'}
className={css({
bg: isSuccess ? 'unset' : '#D8D8D8',
bg: isSuccess ? 'unset' : '$testCaseFailedBg',
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks good. We should use color tokens instead of constant colors

justifyContent="center"
px="20px"
py="8px"
selectors={{
Copy link
Contributor

Choose a reason for hiding this comment

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

using _lastChild and _firstChild syntex

borderLeft: 'solid 1px #2B2B2B',
borderLeft: 'solid 1px $tableBorder',
},
'tr[data-responsive="desktop"]:first-of-type &, tr[data-responsive="mobile"]:nth-of-type(2) &':
Copy link
Contributor

Choose a reason for hiding this comment

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

지금 보니까 이거 좀 아쉽네요
borderTop: [~, null, "initial", null, ~]

이런식으로 data-responsive를 설정하지 않고도 이를 개선할 수 있었을 텐데.. 여기까지 해보실 수 있을까요?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark-Mode의 가독성 개선 방향성 제안

2 participants