Skip to content

refactor: replace hardcoded colors with theme variables#142

Draft
crayonpeenut wants to merge 1 commit into
dev-five-git:mainfrom
crayonpeenut:fix/dark-mode-ui-color
Draft

refactor: replace hardcoded colors with theme variables#142
crayonpeenut wants to merge 1 commit into
dev-five-git:mainfrom
crayonpeenut:fix/dark-mode-ui-color

Conversation

@crayonpeenut

Copy link
Copy Markdown

Closes #139

Dark mode UI Updated

기존 UI의 이슈

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

수정한 UI 요소

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

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

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

codecov Bot commented Jan 25, 2026

Copy link
Copy Markdown

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
Copy Markdown
Contributor

Changepacks

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

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.

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

Comment thread apps/landing/devup.json
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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를 설정하지 않고도 이를 개선할 수 있었을 텐데.. 여기까지 해보실 수 있을까요?

@owjs3901 owjs3901 marked this pull request as draft February 26, 2026 12:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants