일段时间 동안 다듬어 온 테마를 마침내 공개했습니다. 이제 MIT 라이선스로 오픈소스로 제공됩니다. 헤더, 사이드바, 검색창 등 반투명하고 안개 낀 유리(frosted-glass) 표면을 중심으로 한 깔끔하고 현대적인 디자인으로, 목적에 맞게 제작된 라이트와 다크 컬러 스킴을 갖추고 있습니다. 하드코딩된 색상은 없으며, 모든 것이 Discourse의 CSS 커스텀 프로퍼티에 연결되어 있어 자동 라이트/다크 전환이开箱即用(out of the box)으로 작동합니다.
레포지토리: GitHub - terraboss/discourse-terraglass · GitHub
주요 기능
- 안개 낀 유리 표면 — 헤더, 사이드바/햄버거 메뉴, 헤더 검색 필드/드롭다운이 반투명하며 배경 흐림 효과를 적용했습니다. 투명도와 흐림 강도 모두 설정 가능합니다.
- 독립적이고 목적에 맞게 제작된 라이트 및 다크 컬러 스킴 (단일 스킴의 단순 반전이 아님). 텍스트와 UI 요소 모두 WCAG AA 대비 기준을 충족하도록 검증했습니다.
- X/Twitter 스타일의 원박스(Onebox) 링크 미리보기. 가느다란 테두리와 둥근 모서리를 적용했습니다.
- 에티켓(Etiquette) 스타일의 깃발/화살표 모양 태그
- 모든 기기에서 고정된 16:9 비율의 비디오 임베드
- 은은한 호버 상태를 갖춘 제브라 스트라이프(줄무늬) 토픽 목록
- 버튼, 카드, 모달, 입력 필드에 걸친 설정 가능한 모서리 둥글기
- 스킴 자체의 텍스트 색상을 사용하는 접근성 포커스 아웃라인. 라이트 모드와 다크 모드 모두에서 가시성을 유지합니다.
*上記 모든 항목은 테마 설정입니다. 원하지 않는 기능은 끄거나 조정할 수 있습니다.
설치 방법
Customize → Themes → Install → From a git repository:
https://github.com/terraboss/discourse-terraglass
이렇게 하면 향후 "업데이트 확인"도 원클릭으로 가능합니다.
알려진 문제
backdrop-filter(사이드바, 햄버거 메뉴, 검색 패널 뒤의 흐림 효과)는 투명도 자체가 안정적으로 작동하고 단독으로 우아하게 degrade(단계적 저하)되더라도, 모든 브라우저/Discourse 조합에서 렌더링되지 않을 수 있습니다. 이 문제는 여기서 추적하고 있습니다: backdrop-filter blur has no effect on .menu-panel — 이 문제를 겪었거나 아이디어가 있다면 기꺼이 듣고 싶습니다.
피드백을 환영하며, 레포지토리에서 기능 요청이나 버그 보고를 기꺼이 받겠습니다.