다크 모드나 라이트 모드에 따라 CSS 항목을 변경하는 방법은?

개발
1

검색을 해봐도 명확한 답변을 찾지 못했지만, 다크 모드에서는 한 가지, 라이트 모드에서는 다른 방식으로 CSS 항목을 변경하고 싶습니다.

Discourse에서 이를 달성하는 가장 좋은 방법은 무엇인가요?

2

이 주제가 도움이 될 것 같습니다.

3

CDCK가 호스팅하는 엔터프라이즈 고객이라 color_definitions.css를 직접 수정할 수 없을 것 같습니다. 이 문제를 해결하려면 CDCK에 문의해야 할 것 같습니다.

릴리, 감사합니다!

4

다른 테마나 컴포넌트에서 직접 CSS를 덮어쓰면 될 것 같아요 이 방식이 어떻게 동작하는지 정확히 모르겠어서, 오늘 직접 시험해 보고 다크-라이트 모드 조건부 CSS를 만들어 볼 수 있을지 확인해 보려고 합니다. 가능할 것 같은 느낌이에요.

5

어두운 모드/밝은 모드에 따라 변경하고 싶은 CSS 요소가 무엇인가요?

테마의 CSS/HTML 편집 화면의 색상 정의 탭(color_definitions 스타일시트)에 색상 정의를 추가할 수 있습니다.

6

늦게 답장드려서 죄송합니다! 그래서 특정 토픽의 전문가 답변 게시물 상단에 있는 하이라이트된* 바의 색상을 변경하려고 했습니다. 하지만 라이트 테마와 다크 테마에 따라 다른 색상으로 바를 하이라이트하고 싶었죠.

7

무슨 뜻인지 잘 모르겠어요? 스크린샷을 올려주실 수 있을까요?

8

강조 표시 죄송합니다, 모바일에서 오타가 났습니다!

10

제가 틀렸다는 걸 입증해 주셨으면 좋겠지만, CSS에서 사용할 수 있는 신뢰할 만한 체크 방법은 없다고 생각합니다.

@sp-jordan-violet 보통은 다크와 라이트 색상 스킴의 색상 변수를 사용하는 것이 일반적인 방법입니다. 브라우저 인스펙터로 현재 값을 확인할 수 있습니다. 색상 스킴에 따라 전환되는 새 변수를 추가할 수는 없는 것 같습니다. 하지만 선택할 수 있는 변수가 꽤 많고, 이를 모든 커스텀 선언에서 사용할 수 있습니다. 예를 들어

.topic-avatar {
  height: unset;
  align-self: stretch;
  background-image: linear-gradient(
      to right,
      transparent -40%,
      var(--secondary) 80%
    ),
    linear-gradient(
      to bottom,
      var(--tertiary-300) 0%,
      var(--highlight) 50%,
      var(--quaternary-low) 100%
    );
}

위와 같은 코드를 사용하면 이렇게 :rainbow: :slight_smile: 같은 게시글 하이라이트 효과를 줄 수 있습니다.

image
image790×556 70.5 KB

11

네, 저도 동의하는 편입니다. 자바스크립트/CSS 솔루션을 가지고도 조금씩 테스트해 보고 있지만, 아직 작동하는 것은 없습니다.

12

우와, 이 아이디어 진짜 좋아!!

13

정말 멋지네요. 잘하셨어요 :slight_smile: