라이트/다크 모드 이상의 색상 테마 정의

지원
1

Hi, I would like to know how to set color definitions for more than one color scheme i.e Light, Dark, Dim similar to how twitter works.

My current issue:
I’m currently able to style the default light and dark colors that are not listed such as primary-low in a custom theme component but unaware of how to add this custom color mode to a different color scheme.

$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
    --primary-100:#{$ins};
    --primary-low:#{$ins}; 
  
}
2

안녕하세요 :wave:

Discourse는 라이트 모드와 다크 모드라는 두 가지 색상 스키마를 지원합니다. 따라서 장치를 다크 모드로 전환하면 기본적으로 default dark mode color scheme id 사이트 설정이 적용됩니다.

Discourse에 추가적인 사용자 정의 색상 팔레트를 설정할 수 있습니다.

/admin/customize/colors 페이지에서 새로운 색상 팔레트를 설정할 수 있습니다.

또는

예를 들어 사용자 정의 테마를 사용하는 경우, about.json 파일에서 이를 설정할 수 있습니다.
예를 들어 FKB Pro 테마에서 사용하는 방식과 같습니다.

이 경우 해당 색상 팔레트가 /admin/customize/colors에 추가됩니다.

이러한 색상 팔레트가 추가되면 사용자가 사용자 설정(Preferences) 인터페이스 페이지에서 이를 선택할 수 있습니다. (활성화한 경우)

Screenshot 2024-01-06 at 9.43.56
Screenshot 2024-01-06 at 9.43.56512×134 4.66 KB

dark-light-choose()

dark-light-choose()는 라이트/다크 두 가지 색상 스키마만 처리할 수 있으며, 제가 제안하는 색상 팔레트까지 처리하지는 않습니다. 따라서 이 함수는 기본 변수를 오버라이드하는 데 사용하되, 사용자 정의 색상 변수를 만드는 데만 사용하는 것이 좋습니다. 기본 색상 변수를 오버라이드하려면 위에서 보여준 방법을 사용할 수 있습니다.

사용자가 사용자 설정 인터페이스 페이지에서 사이트 기본 라이트/다크와 다른 색상 팔레트를 설정한 경우, dark-light-choose()로 생성한 색상 변수가 모든 라이트 또는 다크 색상 팔레트/스키마에 대해 사용됩니다.

이것이 제가 아래 #customization:theme-component를 만든 이유 중 하나입니다.

이 테마 컴포넌트를 사용하면 color-scheme="id"를 개별적으로 타겟팅할 수 있습니다.

따라서 다음과 같은 작업을 수행할 수 있습니다 :arrow_down_small:

색상 팔레트(Light, Dim, Dark)를 생성합니다.

필요에 따라 Dim color-scheme="id" 색상 또는 기타 항목에 대한 수정 사항을 만들기 위해 위의 컴포넌트를 사용합니다.