다크(또는 라이트) 모드에 특정 body 클래스를 추가하는 방법?

현재 특정 클래스가 없는 것 같습니다.

이 글을 찾았지만, 다크 모드와 라이트 모드의 테마 ID가 동일하기 때문에(아마도 색상 스킴으로 정의되는 것 같습니다) 작동하지 않습니다.

짧은 스크립트로 해결할 수 있지 않을까요? 그리고 이것이 Discourse 코어에 추가되는 것도 고려해 볼 수 있을까요?

본문에 dark 또는 light 모드를 위한 특정 클래스를 추가해야 하는 이유를 설명해 주시겠어요?

이 핵심 기능이 필요한 사항을 지원하지 않는 건가요?

이주하려는 포럼의 스태프는 특정 갈색 계열의 색상을 만드는 특정 생성된 색상 변수(--tertiary-very-low)를 마음에 들어 하지 않습니다:

그들은 이 색상을 조정하고 싶어 하는데, 해당 변수가 생성된 것이자 다크 모드를 위한 부모 특정 클래스가 없어서 실제로 변경할 수 없는 것 같습니다.

하지만 저는 다음 정보를 발견했습니다:

이 정보가 유효한지 모르겠습니다. 지금 할 일이 너무 많아서 아직 시도해 볼 수 없었거든요 :sweat_smile:. 하지만 작동한다면 그것으로 충분할 것입니다. 사실 더 좋을 것입니다.

저희(죄송합니다. @Canapin와 함께 우리 포럼을 조정하고 있어서 '저희’라고 하겠습니다)는 Discourse의 프랑스어 버전에서 "Café crème"라는 프리셋(아마도 "coffee"일 것입니다)을 사용해 다크 테마를 만들었고, :heart:의 색을 갈색 대신 빨간색으로만 변경했습니다.

이 테마의 이상한 점은 하이퍼링크가 텍스트와 거의 같은 색이라는 것입니다.
그래서 임베드 링크일 경우 거의 보이지 않습니다:


(네, 마지막 두 단어인 "cliquez-ici"가 웹페이지로 가는 링크입니다…)

그래서 저희의 아이디어는 링크를 약간 갈색으로 만들어 눈에 띄게 하는 것이었습니다. 하지만 컬러 팔레트의 quaternary 설정을 조정하면 함께 변하는 색이 한두 가지가 아닙니다: DM 뒤에 있는 "버블"의 배경색이 @Canapin의 첫 번째 메시지에 표시된 갈색보다 새똥에 가까운 색으로 변합니다. 상단 메시지 상자(“발신 메일이 비활성화되었습니다” 상자)도 이 새똥 색으로 변합니다.

그래서 처음에는 css를 사용해 하이퍼링크를 색칠하자는 아이디어였는데, 아직 방법을 찾지 못했습니다.

.cooked a를 CSS 선택자로 사용하면 이러한 링크에 사용자 지정 색상을 설정하는 데 도움이 될 것입니다.

현재 핵심 시스템에서는 각 모드에 해당하는 다크/라이트 색상 스키마 선택을 사용할 수 있지만, 다음과 같이 다크/라이트 모드를 위한 CSS 미디어 쿼리도 사용할 수 있습니다:

@media (prefers-color-scheme: dark) {
    .cooked a, .d-editor-preview a {
        color: var(--primary-low-mid);
    }
}

완료했습니다. 감사합니다!

아니요, 작동하지 않았습니다.

제가 잘못 알고 있다면 정정해 주세요. prefers-color-scheme는 디스코urs(Disourse)에서 실제로 선택된 테마가 아니라 기기의 설정을 기반으로 하는 것이 맞나요?

제 Windows 기기에서는 다크 테마를 설정해 두었습니다. 따라서 제 기기의 설정을 따르는 웹사이트들은 가능한 경우 다크 테마로 표시됩니다.

하지만 제 포럼에서는 의도적으로 라이트 테마를 사용하기로 선택했습니다. 다크 테마가 아닙니다.

라이트 테마를 사용 중인데도 미디어 쿼리 prefers-color-scheme는 여전히 로드됩니다:

라이트 테마, 다크 모드 없음,

그럼에도 불구하고 다크 테마에 대한 규칙은 여전히 적용됩니다:

전체 화면:

죄송합니다. 님이 말씀하신 것이 시스템 설정의 다크 모드, 즉 포럼에서 다크 모드를 활성화하는 것이라고 오해했습니다.

즉, 님은 개인적으로 라이트 컬러 스킴을 사용하시는데, 사용자들은 다크 컬러 스킴을 사용 중이신 건가요?

이전 스크린샷에는 다크 컬러 스킴이 적용된 모습이 나와 있었지만, 최근 답변에서는 라이트 컬러 스킴을 사용 중이라고 하셨습니다.

안녕하세요, 죄송합니다. 네, 명확하지 않네요. 특히 같은 종류의 두 가지 요소가 서로 다른 색상 스킴에 적용되는 상황에서 더 그렇습니다. 저에게도 다소 혼란스러웠습니다.

그래서 제 질문은 다음과 같습니다: Discourse에서 디바이스의 다크/라이트 모드 설정과 무관하게 현재 사용 중인 색상 스킴이 무엇인지 어떻게 알 수 있을까요?

제 이해가 맞다면:
제 디바이스(Windows 10)가 다크 모드로 설정되어 있지만, Discourse에서 라이트 색상 스킴을 선택한 경우, 포럼 CSS의 미디어 쿼리 (prefers-color-scheme: dark) 는 여전히 일종의 “true” 값을 반환하여 중첩된 규칙이 적용됩니다. 제 디바이스가 다크 모드로 설정되어 있더라도, 제 포럼에서는 라이트 색상 스킴을 선택했기 때문입니다.

즉: Discourse의 HTML 코드에서 현재 라이트 색상 스킴인지 다크 색상 스킴인지 어떻게 확인할 수 있나요? “light-color-scheme” 또는 "dark-color-scheme"과 같은 상위 클래스를 찾지 못했습니다. 따라서 CSS에서 특정 색상 스킴을 구별하거나 표적화하여 한쪽에만 규칙을 생성할 수 없습니다.

설명해 주셔서 감사합니다. 이제 이해했습니다.

사용자가 현재 선택한 색상 테마에 따라 body에 어떤 클래스도 추가하지 않습니다.

더 깊이 파고들자면, 현재 선택한 어두운 테마에서 --tertiary에 대한 색상 함수가 생성하는 색상이 마음에 들지 않는 것이 이유인가요?

현재는 할 수 없다고 느끼는 body 클래스를 통해 무엇을 이루고 싶으신가요?

네, 정확합니다 :slight_smile:

이 질문을 다시 읽어보니… 제가 아는 한 생성된 색상을 대체하는 유일한 방법은 다음과 같은 방식입니다.

:root {
  --primary-medium: #666666;
}

하지만 :root 셀렉터이기 때문에, html 또는 body 요소에 클래스를 적용해도 :root보다 앞서 특정 색상 스킴을 타겟팅할 수 없습니다.
그러니… 잘 모르겠습니다.

간단히 말하면, 아이디어는 특정 색상 스킴에 대해 특정 생성된 색상을 변경하는 것이었습니다. :person_shrugging:

불가능하다면 큰 문제는 아닙니다. 우리는 우리 스킴의 색상으로 몇 가지 실험을 해보았고, 현재 생성된 색상으로 충분히 만족하고 있습니다. :slight_smile: 더 나을 수는 있겠지만, 큰 문제는 아닙니다. :slight_smile:

원하시는 경우, 일종의 숨겨진 우회 방법이 있습니다.

폴더를 생성하고 그 안에는 about.json 파일만 추가하면 됩니다.

저는 내장된 색상 함수에 의존하기보다 직접 변형을 지정하고 싶었기 때문에, solarized light 색상 스킴을 만들기 위해 실제로 이렇게 했습니다.

제가 만든 실제 about.json 파일은 다음과 같습니다.

그 다음 이 "테마"를 설치하면, 해당 색상 스킴이 포럼에 설치됩니다. 이 시점부터 다른 테마에서도 사용할 수 있도록 할 수 있습니다.

{
  "name": "Solarized Light",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Solarized Light": {
      "primary": "002B36",
      "primary-high": "4C6869",
      "primary-medium": "7E918C",
      "primary-low-mid": "A4AFA5",
      "primary-low": "D6D8C7",
      "primary-very-low": "F0ECD7",
      "secondary": "FCF6E1",
      "secondary-very-high": "E8E6D3",
      "secondary-high": "97A59D",
      "secondary-medium": "6C8280",
      "secondary-low": "325458",
      "tertiary": "0088cc",
      "tertiary-high": "329ED0",
      "tertiary-medium": "7EBFD7",
      "tertiary-low": "D6E6DE",
      "quaternary": "e45735",
      "header_background": "FCF6E1",
      "header_primary": "002B36",
      "highlight": "ffff4d",
      "highlight-high": "BCAA7F",
      "highlight-medium": "E3D0A3",
      "highlight-low": "FDF9AD",
      "danger": "e45735",
      "danger-low": "F8D9C2",
      "success": "009900",
      "success-medium": "4CB544",
      "success-low": "CFE5B9",
      "love": "fa6c8d",
      "love-low": "FCDDD2"
    }
  },
  "modifiers": {
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

예전에 디스코urs 설치에 대해 더 깊이 작업하던 시절에 이 내용을 본 기억이 나네요!

확실히 좋은 우회 방법입니다. 감사합니다. 다소 해킹적인 방법으로 여겨질 수 있지만, 이것이 올바른 해결책이라고 생각하겠습니다.