색상 팔레트 문제

안녕하세요, 제 웹사이트에서 mint 테마를 사용 중인데 색상 관련 문제가 있습니다. 상단에 다크/라이트 모드 버튼이 있는데, 버튼의 배경색을 변경하면 버튼의 텍스트 색상도 함께 변경되어 "다크/라이트"라는 글자가 보이지 않게 됩니다.

첨부한 이미지에서 보시는 것처럼 빈 것처럼 보이지만, 실제로는 "dark, light, auto"라고 적힌 세 개의 다른 버튼입니다. 배경색과 텍스트 색상이 동일해서 보이지 않는 상태입니다.

2개의 좋아요

업데이트: 여전히 같은 문제가 발생합니다… 도와줄 수 있는 분 계신가요?

안녕하세요, 환영합니다!
색상을 변경하기 위해 사용자 지정 CSS를 추가했다는 뜻인가요? 수정 사항을 공유해 주실 수 있을까요?

그리고 이 포럼에서 최근 어두운/밝은 테마 전환과 관련된 논의에서, 이 기능이 작동하려면 설정에서 밝은 및 어두운 색상 팔레트를 모두 구성해야 한다는 점이 지적되었습니다.

안녕하세요, 감사합니다! 아니요, 저는 아무것도 추가로 추가하지 않았습니다. 저는 mint 테마를 사용 중입니다. 다크/라이트/오토 버튼의 색과 배경색이 동일해서 보이지 않는 것처럼 보입니다. 예를 들어, 버튼 색을 변경하면 버튼 배경에도 영향을 미칩니다.

1개의 좋아요

사이트 설정의 기본 다크 모드 색상 스킴 ID에 무엇이 지정되어 있나요? mint-dark여야 합니다.

그렇긴 한데, 작동하지 않아요. 글자가 여전히 안 보여요

제 생각에는 핵심 d-menu CSS가 더 높은 우선순위(specificity)를 가지고 있어 테마의 버튼 스타일을 덮어쓰는 것 같습니다:

하지만 이것이 반드시 문제의 원인인 것은 아닙니다.
Mint 테마는 기본 버튼(btn-default 클래스)에 대해 특정 스타일을 사용합니다.
그리고 셀렉터 메뉴 드롭다운 항목은 btn-default를 가진 버튼을 사용합니다.

핵심 코드에서 해당 클래스를 명시적으로 지정하는 것이 필요한지 궁금합니다. 실용성이 없어 보이지만, 제 판단이 틀릴 수도 있습니다.
제거했을 때:

아니면, 테마가 핵심 기능을 지원해야 할 수도 있습니다:

.interface-color-selector-content .btn-default {
    color: var(--primary);
    border: none;
    transition: none;
    text-transform: none;

    .d-icon {
        color: var(--primary-high);
    }
}
3개의 좋아요

음, 좀 복잡하네요. 제가 한번 처리해볼게요 :smiley:

2개의 좋아요

이것은 디자인 팀의 코어 관련 문제로 보이므로, UX 카테고리로 이동했습니다.

4개의 좋아요

정말 감사합니다!

3개의 좋아요

업데이트: 버튼이 사라졌어요. UX 팀에서 작업 중인가요? :smiley:

1개의 좋아요

안녕하세요,

오래 기다리게 해서 죄송합니다. btn-default 클래스는 실제로 여기에서 필요하지 않으며, 이 문제가 발생한 원인이었습니다.

다음 PR로 수정되었습니다.

1개의 좋아요

이 주제는 4일 후 자동으로 닫혔습니다. 새로운 답변은 더 이상 허용되지 않습니다.