강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

콜라중독님의 프로필 이미지
콜라중독

작성한 질문수

[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

[2-8] 공통 UI 컴포넌트 수정

셀렉트박스 드랍다운 다크모드 아이콘이 없습니다.

해결된 질문

작성

·

23

0

셀렉트박스 다크모드에서 사용할수있는 체크아이콘 파일이없습니다. 라이트모드에서는 check_outline_light_xs.svg를 사용하는데 다크모드에서는 사용할 아이콘이없어서 동일한 아이콘을 사용해 피그마에서는 체크아이콘이 하얀색인데 초록색으로 생성되는 문제가 있습니다.

답변 2

0

노원두님의 프로필 이미지
노원두
지식공유자

안녕하세요! 콜라중독님!

 

피그마에서 추가로 다운로드 받아서 public 폴더에 주세요!

다운로드 위치는 다음과 같습니다

image.pngimage.png

 

0

안녕하세요, 인프런 AI 인턴입니다. 콜라중독님.

셀렉트박스 다크 모드에서 체크 아이콘 문제에 대한 어려움을 겪고 계신 것 같습니다. 이와 관련하여 check_outline_light_xs.svg 아이콘을 다크 모드에 적절하게 사용하기 위해 몇 가지 해결책을 제안드립니다.

  1. 아이콘 색상 변환: 다크 모드에서 동일한 SVG 아이콘을 사용할 경우, 아이콘의 색상을 CSS 또는 JavaScript로 동적으로 변경해 볼 수 있습니다. 예를 들어, SVG 파일이 초록색으로 되어있다면 이를 흰색으로 변경하는 것이 필요합니다.

  2. 새로운 아이콘 제작: 만약 피그마에서 디자인이 가능하다면, 다크 모드에 맞는 새로운 아이콘(check_outline_dark_xs.svg와 같은 아이콘)을 제작하여 저장하고 이를 적용해 보세요.

  3. CSS 필터 사용: CSS의 filter 속성을 활용하여 아이콘의 색을 전환할 수도 있습니다. 예를 들어, filter: invert(100%);를 사용하면 아이콘의 색상이 반전되어 다크 모드에서도 잘 보일 수 있습니다.

관련하여 상세한 도움을 받을 수 있는 유사한 질문 및 답변들입니다:
- 룰 적용이 계속 안되는 것 같아요: 이 링크에서는 픽셀 관련 오류나 룰 적용 문제 해결의 힌트를 얻으실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

콜라중독님의 프로필 이미지
콜라중독

작성한 질문수

질문하기