테마용 데이터 선택기

개발
1

안녕하세요,

테마에 대한 데이터 선택자를 제안드립니다. 이를 통해 컴포넌트에서 전체 테마를 더 쉽게 수정할 수 있기를 바랍니다.

제 상황이 얼마나 일반적인지 확신은 없지만, 저는 현재 graceful을 두 개 설치하여 다크 팔레트와 라이트 팔레트를 함께 사용하는 예시를 실행하고 있습니다. 테마 컴포넌트를 사용하여 이러한 원격 테마를 수정하고, 좋아요 버튼 변경과 같은 보편적인 변경 사항을 적용하고 있습니다. 스타일을 통해 변경되는 보편적인 편집은 모두 잘 작동하지만, 다크 버전에만 적용되어야 하며 라이트 테마에는 나타나지 않아야 하는 편집을 하려 할 때 문제가 발생합니다. CSS를 사용하여 테마 ID별로 변경 사항을 적용하는 방법을 찾지 못했습니다. 현재 제가 원하는 것을 구현하려면, 제가 원하는 사소한 부분들을 위해 각 테마마다 개별적인 테마 컴포넌트를 만들어야 합니다.

아마도 [data-theme-id]와 같은 기능이 있으면 좋겠습니다.

이 기능이 이미 가능하다면 무시해 주셔도 됩니다. 저는 이 기능이 여러 테마를 수정하고 싶지만 컴포넌트 목록이 너무 많이 쌓이는 것을 피하고 싶은 사이트들에게 큰 도움이 될 것이라고 생각합니다.

2

정확히 이해가 안 되지만, 라이트 테마와 다크 테마에 CSS를 직접 추가할 수 있습니다.

개인적으로 컴포넌트는 마진, display, 패딩, 너비와 같은 보편적인 변경 사항에 정말 유용하다고 생각합니다. 하지만 색상의 경우, 변수를 사용하지 않는 한 테마를 직접 수정하는 것이 더 좋습니다.

이미 존재하는 해결책을 과도하게 복잡하게 만드는 것 같습니다 :thinking:

3

하지만 원격 테마를 편집하면 다음 업데이트 시 변경 사항이 사라지지 않나요?

이 문제는 단순히 색상 변경에 관한 것이 아닙니다. 하나의 컴포넌트에서 특정 테마에 대해 구체적인 변경 사항을 적용하되, 더 많은 컴포넌트를 만들 필요 없이 일부 테마에만 적용하는 방법에 관한 것입니다.

4

맞습니다. 원격 테마의 경우 다음 세 가지 구성 요소를 사용할 수 있습니다:

universal theme fix(보편적 테마 수정)는 공유된 변경 사항에 사용하며, dark theme fix(다크 테마 수정) / light theme fix(라이트 테마 수정)는 색상과 같은 특정 변경 사항에 사용합니다. 구성 요소를 하나의 테마에만 연결할 수 있습니다.

Light graceful에는 보편적 수정과 라이트 수정이 적용되고, Dark graceful에는 보편적 수정과 다크 수정이 적용됩니다.

마지막 수단으로, 변경 사항이 작동하지 않는 경우 해당 라이트/다크 수정 줄에 !important를 추가할 수 있습니다.

5

말씀이 맞을 것 같습니다. 저는 이미 범용 컴포넌트 하나와 테마별 컴포넌트 하나씩, 즉 이 예시에서는 총 세 개의 컴포넌트를 구상해 두었습니다. 하지만 디스코urs의 거의 모든 다른 부분에는 데이터 선택기가 하나씩 존재하므로, 데이터 선택기를 통해 쉽게 해결할 수 있는 문제를 위해 세 개의 리포지토리를 만드는 것은 과도한 조치처럼 느껴졌습니다.

참고로, 테마 ID는 메타 이름에 콘텐츠 ID로 포함되어 있으며, 키워드는 discourse_themes_id입니다. 또한 테마를 변경하는 링크에는 [data-id=“#”]가 포함되어 있습니다. 적어도 제가 메타에 설치된 해당 컴포넌트가 생성한 햄버거 테마 선택기 링크나 제 테스트 사이트 중 하나에서 인스펙션을 해보면 그렇습니다. 즉, 디스코urs가 해당 정보를 제공하지 않는다는 뜻은 아닙니다.

6

테마 컴포넌트의 헤더 탭에 이 내용을 추가하면

<script type="text/discourse-plugin" version="0.8">
  const themeSelector = require('discourse/lib/theme-selector');
  const currentThemeId = themeSelector.currentThemeId();
  document.body.dataset.themeId = currentThemeId;
</script>

<body> 태그에 data-theme-id 속성이 추가되며, 이를 다음과 같이 사용할 수 있습니다.

[data-theme-id="1"] {
  // 라이트 테마 CSS
}

[data-theme-id="2"] {
  // 다크 테마 CSS
}
7

이 매우 구체적인 경우, SCSS 헬퍼를 사용할 수 있습니다. 코어에서 가져온 예시이지만, 테마에서도 동일하게 작동해야 합니다:

@is-dark-color-scheme도 사용할 수 있습니다.

이렇게 하면 컴포넌트가 테마 ID에 종속되지 않으므로, 다른 사이트에 테마를 설치하더라도 문제가 되지 않습니다.

8

두 분 모두 최고입니다. 정말 감사합니다 :slight_smile: