다크 모드 배경색에 영향을 주지 않고 배경 컨테이너에 특정 색상을 정의하는 것이 가능한가요?
우리는 Graceful 테마 설정에서 위의 배경 이미지 및 타일링 설정 비활성화를 선택하고 다음 CSS를 추가했습니다:
// Graceful 배경 이미지 대신 배경 색상
.background-container {
background-color: #FAF0FC;
}
이 연보라색은 기본 색상 팔레트에서 잘 어울리지만, 다크 모드에서는 어두운 회색 대신 이 색상이 나타나게 되어 좋지 않습니다.
원본 CSS에는 변수가 언급되어 있지만, 라이트 모드와 다크 모드에 서로 다른 색상을 제공하도록 이 변수를 어떻게 사용해야 하는지 모르겠습니다:
background-color: var(--gf-primary-very-low-or-primary-low, #f8f8f8);
중요한 세부 사항은, 우리는 텍스트가 있는 영역의 배경이 아닌 메인 배경의 색만 변경하고자 한다는 것입니다. 이것이 바로 색상 팔레트 값을 직접 사용할 수 없는 이유입니다(무언가를 놓쳤다면 모르지만).
기본(라이트) 모드의 배경을 변경하면서 다크 모드의 어두운 배경은 유지하려고 계속 시도하고 있습니다.
라이트 배경에 단색을 적용하고 싶어도, CSS로 시도해본 모든 경우에서 동일한 색상이 다크 모드 배경에도 적용되고 있습니다.
그래서 이미지로 시도해 보고 있습니다. 배경 이미지를 기본값으로 설정하면 라이트 모드에는 표준 Graceful 이미지 배경이, 다크 모드에는 어두운 배경이 적용됩니다. 라이트 모드에서만 사용될 수 있는 사용자 지정 이미지를 추가할 수 있다면 좋겠지만, 그렇게 시도해 보면 동일한 이미지가 다크 모드에도 적용됩니다. 배경 이미지가 밝아 라이트 모드에 적합하기 때문에, 이로 인해 다크 모드 경험이 해쳐집니다.
이 문제를 해결하는 데 도움을 주실 수 있을까요?
piffy
6월 25, 2024, 8:12오후
142
간단한 임시 해결책은 20~50% 정도의 불투명도를 가진 배경색을 사용하는 것입니다. 이렇게 하면 밝은 테마와 어두운 테마 모두에서 배경색을 자연스럽게 따를 수 있습니다.
1개의 좋아요
@piffy 정말 감사합니다. 확실히 좋은 우회 방법입니다.
20% 투명도로 #FAF0FC가 되는 SVG 숫자를 계산하는 수학에 빠져 있었지만, 제 눈에는 이 정도면 충분히 가깝고, 다크 모드는 어두우니까 괜찮습니다. 후우!
// Graceful 배경 이미지 대신 배경색 사용
.background-container {
background: rgb(200 190 192 / 20%);
}
리포트해 주셔서 감사합니다. 이 업데이트로 해당 문제가 수정될 예정입니다.
main ← ux-style-adjustments
merged 07:48PM - 02 Jul 24 UTC
Before:
After:
1개의 좋아요
테마 옵션에서 "매개변수 편집"을 클릭하면
[
{
"setting": "background_image",
"value": "false"
},
{
"setting": "tile_background",
"value": false
},
{
"setting": "no_background_image",
"value": false
}
]
이렇게 하면 배경 SVG가 제거됩니다.
2개의 좋아요
이 테마에서 포럼의 폭을 올바르게 조정하는 방법을 찾은 분이 계신가요?
CSS 변경 사항이 효과를 내지 않는 것 같고, Canapin의 커스텀 폭 컴포넌트 는 기본 테마에서는 잘 작동하지만 Graceful에서는 효과가 없는 것 같습니다.
기본적으로 포럼이 매우 좁아 이 부분을 변경할 수 있으면 좋겠습니다.
The Canapin의 TC가 이 주제에서 제게 잘 작동합니다.--d-max-width와 --topic-body-width CSS 변수를 설정합니다.
예를 들어 수동으로 시도해 볼 수 있습니다:
body {
--d-max-width: 1500px;
--topic-body-width: 1500px;
}
데스크톱에서는 너비 문제가 해결되었지만, 이제 세 가지 문제를 겪고 있습니다:
CSS로 사용자 제목의 색상을 변경하는 것이 불가능한 것 같습니다.
아래와 같이 사용하고 있습니다:
.user-title{
background: #F55;
border-radius: 3px;
color: #FFF !important;
padding-left: 7px;
}
예를 들어, 패딩, 배경색 등의 변경은 올바르게 적용되지만, 실제 텍스트 색상은 무시되고 기본인 노란색으로 유지됩니다. 이를 변경하려면 다른 부분을 지정해야 하나요? 기본적으로 흰색 배경에 노란색은 읽기 매우 어렵습니다.
모바일에서는 포럼의 너비가 화면 너비보다 약간 더 넓게 표시됩니다. 데스크톱 사용자의 너비 증가를 되돌리지 않으면서, 모바일에서는 최대 100% 너비를 유지하도록 설정하는 방법이 있을까요?
@Solari가 위에서 언급한 것과 동일한 문제입니다. 모바일에서 카테고리 색상 바가 표시되지 않습니다. 답변에서 제안된 CSS 코드를 시도해 보았지만 문제가 해결되지 않았습니다. 모바일에서 카테고리 색상 바를 다시 표시하는 방법을 알아낸 사람이 있을까요?
2개의 좋아요
이슈 1의 원인은 테마가 이미 사용자 제목 색상에 !important 태그를 사용하고 있는 것 같습니다.
해당 테마의 HTML/CSS를 편집할 수 없는 상황에서, 이를 변경하거나 오버라이드하는 방법이 있을까요?
danvanmoll
4월 27, 2025, 12:55오후
152
안녕하세요!
포럼의 모바일 버전에서 세로 색상 막대가 여전히 표시되지 않습니다. 제가 놓친 것이 있을까요?
https://forum.twogeeksonecup.wtf
감사합니다!
1개의 좋아요
Heliosurge
5월 1, 2025, 11:59오후
153
이 세로 막대가 어디에 위치하는지 자세히 보여주는 이미지를 제공해 주실 수 있나요?
참고로 이 포럼이 정말 좋습니다.
1개의 좋아요
감사합니다!
실제로 이 바가 표시되는 다른 포럼의 스크린샷을 첨부했습니다.
기본적으로 데스크톱 버전에서 표시되는 것과 동일한 바입니다.
1개의 좋아요
Heliosurge
5월 2, 2025, 12:07오전
155
아니에요, 언제든 환영합니다.
자, Meta에서 Graceful 테마를 선택한 상태로 확인해 봤습니다. 모바일에서는 왜인지 데스크톱과 달리 컬러 바가 표시되지 않습니다. 그 이유에 대해서는 저도 정확히 알지 못합니다.
다만 데스크톱에서 사이드바를 통해 모바일 뷰로 전환하면 요소 검사(inspect element)를 사용할 수 있을 것입니다. 또한 데스크톱 모드에서 CSS가 어떻게 다른지 확인해 보시는 것도 좋습니다. 필요하다면 모바일에서 오버라이드를 적용한 커스텀 컴포넌트를 만들어 컬러 바가 예상대로 작동하도록 처리할 수 있을 것입니다.
감사합니다! 정말 고맙습니다. 이 스레드에서 다른 사용자들이 이미 이전에 해당 문제를 보고했었기 때문에, Grace의 향후 업데이트 이후에도 유지될 수 있는 더 영구적인 해결책을 기대하고 있었습니다.
2개의 좋아요
Heliosurge
5월 2, 2025, 12:16오전
157
이 내용을 #contribute:bug로 게시하고 ux graceful-theme
그렇게 하면 가시성이 높아질 수 있습니다.
대안으로, 이 테마 구성 요소는 멋진 카테고리 뷰를 제공합니다. Air 테마에서 사용되고 있습니다.
Contribute to discourse/discourse-minimal-category-boxes development by creating an account on GitHub.
1개의 좋아요
PatrickH
9월 25, 2025, 11:53오전
159
훌륭한 테마네요!
Orioni
4월 24, 2026, 2:20오후
160
의도적으로 나쁘게 말하려는 건 아니지만, 기본 배경 이미지에 왜 свастика(万字)가 들어 있는지 궁금했어요. 처음에 눈에 들어온 것 중 하나였거든요. 그냥 제 _스파이더 센스_가 과민하게 반응하는 건지도 몰라요. 항상 잠재적으로 독성이 있는 커뮤니티 멤버들을 경계하고 있거든요.
1개의 좋아요
