다크/라이트 모드 전환

커스터마이징 테마 컴포넌트
,
163

질문이 다크 모드로 전환하는 토글을 추가하는 이 테마 컴포넌트에 관한 건가요, 아니면 일반적으로 다크 컬러 팔레트를 감지하는 것에 관한 건가요?

dark-light-choose가 있습니다.

2개의 좋아요
164

도와주셔서 감사합니다.
저는 이 다크/라이트 모드 토글 컴포넌트를 사용 중입니다.

저의 질문은 현재 어떤 모드에 있는지 감지하여 배경 이미지를 전환하는 방법에 관한 것입니다. 라이트 모드용 이미지 하나와 다크 모드용 이미지 하나를 사용하길 원합니다.

게시해주신 링크와 이 링크를 따라 해보았습니다.

이 링크는 조금 더 자세한 내용을 다루고 있지만, 성공하지 못했습니다. 제 테마에 이미지 파일(JPG) $bg-light와 $bg-dark를 추가하는 것을 시도해 보았습니다.

image
image352×268 9.78 KB

또한, 그 게시물에 있는 코드를 사용하여 color_definitions.scss 스타일시트를 제 테마에 추가하는 것도 시도해 보았습니다.

$bg: url(dark-light-choose($bg-light, $bg-dark));

:root {
  --custom-bg: #{$bg};
}

게다가 GitHub에서 테마를 생성하는 것도 시도해 보았습니다.

말씀드린 것처럼, 조금 헤매고 있는 점 죄송합니다.
새로운 토픽을 시작해야 한다면 알려주시고, 어떤 카테고리에 올려야 하는지도 알려주시면 감사하겠습니다.
도와주셔서 감사합니다.

1개의 좋아요
165

필요할 경우 관리자는 #dev에서 해당 게시글을 새 주제로 이동할 수 있습니다. 저는 단순히 문제가 테마 컴포넌트와 직접적으로 관련이 있는지, 아니면 브라우저나 기기 설정을 통해 다크 모드를 활성화했을 때도 발생하는지 확인하고 싶었습니다.

이미 꽤 근접해 있는 것 같습니다. 제가 알아본 바로는 url()을 두 번 사용하고 있습니다:

1개의 좋아요
166

제 문제는 확실히 테마 컴포넌트와 관련이 없습니다.
도움 주셔서 감사합니다. 소란을 피운 점 죄송합니다. :blush:

와아… 아무한테도 말하지 마세요. 저의 비법(시크릿 소스)은 두 배경을 블렌딩하는 겁니다. 첫 번째 것이 다음 것보다 우선순위가 높습니다. 그래서 첫 번째는 반쪽이 투명하고 다른 반쪽은 정적 이미지인 선형 그라데이션입니다. :wink: :sunglasses:

여기 효과 작동 모습이 있습니다.

image
image645×486 46.9 KB

167

2개의 배경을 사용한다는 걸 이해했어요.

background-image: linear-gradient(to top, white, 15%, transparent), url(var(--custom-bg));

그런데 url(var(--custom-bg))가 --custom-bg: #{$bg};와 $bg: url(dark-light-choose($bg-light, $bg-dark));와 결합되면, 결국 url(url(dark-light-choose($bg-light, $bg-dark)))가 되는 거 아닌가요?

3개의 좋아요
168

현재 코어에서 다크/라이트 모드 토글을 제공하므로, 이 테마 구성 요소는 더 이상 지원되지 않습니다. 자세한 내용은 아래 공지 사항을 참고해 주세요:

5개의 좋아요