카테고리별 고유 색상 스킴

개발
1

안녕하세요.

구식 포럼을 디스커스로 이관하고 있는데, 원본 사이트에는 특정 카테고리에 고유한 테마(고유한 헤더 로고 포함)가 적용되어 있었습니다.

현재 제 해결책은 다음과 같은 형태를 가진 테마 컴포넌트입니다:

CSS:

body.category-target-category{
/// #hexcodes를 원하는 색상 값으로 대체하세요
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
/// 필요한 모든 색상 값에 대해 계속 적용하세요
}

HTML/JS:

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() =>{
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

현재 저는 오버라이드하기 위해 color_definitions.scss 파일에 언급된 모든 가능한 색상 값을 반복해야 합니다. 이 파일의 값은 foundation/color_transformations.scss에서 생성되며, 이는 foundation/colors.scss에서 발견되는 값들로부터 생성된다고 생각합니다. 관리자 메뉴를 통해 또는 테마 컴포넌트의 about.json을 통해 루트 색상 테마 값을 오버라이드할 수 있다는 것을 알고 있지만, 이러한 변경 사항은 사이트 전체에 적용된다고 생각합니다.

color_definitions.scss의 100개 이상의 변수를 모두 나열하는 것 외에 특정 카테고리를 커스터마이징하는 더 효율적인 방법이 있을까요? 예를 들어 foundation/colors.scss 파일을 테마 컴포넌트를 통해 수정할 수 있을까요?

도움 주셔서 감사합니다!

2

@Rhababo :wave: Meta에 오신 것을 환영합니다 :slight_smile:

Discourse 테마 및 개발 경험이 없다면, 여기 있는 리소스부터 시작해 보세요:

예를 들어, 특정 카테고리의 로고와 헤더 색상, 심지어 아이콘 색상까지도 다음과 같은 CSS 코드를 사용하여 변경할 수 있습니다:

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

새로운 테마를 단순히 생성하기만 한다면, 코드를 추가하고 로고를 자산으로 업로드할 수 있습니다. <category-slug>는 브라우저의 URL 필드에 표시되는 소문자 카테고리 이름입니다 (부모 카테고리와 하위 카테고리는 parentcategory-subcategory와 같이 “-” 대시로 구분합니다).

이 외에도 검색할 수 있는 다양한 #customization:theme-component가 있습니다:

3

Lilly님, 도움과 자료 감사합니다!

로고를 위한 CSS 설명을 정말 감사히 받았습니다. 제가 작성했던 어색한 스크립트보다 훨씬 우아하네요.

제 사용 사례에는 절대적으로 잘 맞을 것 같습니다. 다만 모든 요소를 개별적으로 선택하고 각각 색상을 직접 코딩하는 방식은 다소 번거롭게 느껴졌습니다. colors.scss에 있는 약 12개의 기본 색상으로 색상 팔레트를 생성하는 discourse의 메커니즘을 활용할 수 있는 방법이 있을지 궁금합니다. 이를 위해서는 테마 컴포넌트보다는 플러그인이 필요할 것 같고, 이는 다른 날에 도전해 볼 과제라고 생각합니다.

감사합니다!