꽤 오랜 기간 동안 아이콘 헤더 관련 문제를 겪고 있습니다. 다크 테마에서는 헤더 아이콘이 흰색이고, 라이트 테마에서는 헤더 아이콘이 어두운 색으로 표시됩니다. 문제를 해결하기 위해 다시 한번 조사해 보고 여러 주제를 살펴봤습니다.
이 주제에서: Site header icons don't use header primary color 아이콘에 header primary와 header secondary를 사용하도록 Discourse가 업데이트되었다고 언급되어 있습니다:
그러나 내 색상 테마를 살펴보고 이것저것 시도해 본 결과, 내 인스턴스에는 해당 수정 사항이 적용되어 있지 않은 것으로 보입니다. 이 링크된 게시글은 2019년 것이었고, 현재 저는 3.4.0.beta1-dev 버전을 사용 중입니다.
제가 말하는 것의 예시:
primary를 빨간색으로 변경하면:
혹시 통찰력이나 제안 사항이 있으신 분이라면 정말 감사하겠습니다.
테마를 사용하지 않는 “테마 없음” 모드로 안전 모드를 실행하면 문제가 사라지나요?
확인해볼 생각조차 하지 못했는데, 방금 확인해 보니 해당 작업을 수행했을 때 문제가 사라졌습니다. 아마도 제가 사용하는 테마의 문제인 것 같습니다. 현재 꽤 오래된 버전이니까요.
브라우저 개발자 도구를 사용하면 어떤 스타일이 적용되고 있는지 확인하여 이 문제를 해결할 수 있습니다. Chrome/Firefox의 경우, 헤더 아이콘 중 하나를 마우스 오른쪽 버튼으로 클릭한 다음 "검사(Inspect)"를 선택하세요.
요소에 영향을 미치는 모든 CSS 코드를 보여주는 스타일(Styles) 패널을 찾아보세요. 아이콘 색상 자체는 color 속성에 의해 제어되어야 합니다. 귀하의 경우 background-color가 "primary"로 설정되어 있을 수도 있습니다.
오른쪽에는 각 CSS 스타일 블록에 대한 소스 파일 이름이 표시됩니다. 그중 많은 부분이 코어 Discourse에서 비롯됩니다(예: 스크린샷의 “header.scss”). "theme_6.scss"와 같은 이름이 표시되면 귀하의 테마나 다른 활성 테마 컴포넌트에서 비롯된 것입니다. 파일 이름을 클릭하면 파일을 볼 수 있으며, 파일 내 해당 코드의 위치(또는 파일 이름 오른쪽의 줄 번호)를 확인할 수 있습니다.
마지막으로, 스타일 패널에서 속성을 켜고 끌 수 있습니다. 이를 통해 속성이 제거된 경우의 모습을 볼 수 있습니다(속성에 마우스를 올리면 체크박스가 나타남). 속성은 우선순위가 높은 것부터 낮은 것 순으로 나열되므로, 일반적으로 위쪽의 속성이 아래쪽의 속성을 덮어씁니다. 예를 들어, 스크린샷에서 "buttons.scss"의 color: var(--primary-low-mid)가 덮어씌워진 것(줄이 그어져 있음으로 표시)을 볼 수 있습니다.
명확한 문제를 찾지 못하면 Elements 탭에서 부모 요소를 선택하여那里的 스타일링을 찾아볼 수 있습니다. 이 경우 svg 아이콘은 링크(<a>) 요소 안에 있고, 그 안쪽은 목록 항목(<li>) 요소 안에 있으며, 배경색은 이 중 하나에서 비롯될 수 있습니다.
테마에서 문제를 일으키는 CSS 코드를 찾으면, 이를 안전하게 제거하여 기본 모양으로 되돌릴 수 있습니다!
이렇게 자세한 답변을 주셔서 정말 감사합니다! 오늘 밤 늦게 이 부분을 확인하고 수정을 시도해 보겠습니다.
