Radiant, Discourse용 우아한 테마

이 테마는 미니멀하면서도 현대적인 매력을 지니도록 설계되었습니다. 전체 스타일링은 CSS로 구현되었으며 이미지는 전혀 사용하지 않았습니다.

:rainbow: :dizzy: :rocket:

홈페이지:

토픽 페이지:

전체 페이지 검색:

모달:

이 테마를 어떻게 더 개선할 수 있을지 의견을 남겨주세요. 즐기세요! :smiley:

31개의 좋아요

정말 멋진 디자인입니다!

배경의 모양이나 색상을 커스터마이징할 수 있는 방법이 있을까요? 배경 위에서 본체의 “발광” 효과를 조정할 수 있으면 더 유용할 것 같습니다.

3개의 좋아요

안녕하세요,

정말 멋진 작업이네요 :heart: 이 테마가 꽤 멋져 보입니다 :heart_eyes:
팝업, 메뉴, 입력 필드 등에 균일한 둥근 모서리와 그림자를 적용하는 건 어떨까요? 새로운 로딩 슬라이더와 함께라면 정말 훌륭할 것 같습니다 :heart_eyes:

2개의 좋아요

아니요, 배경은 CSS 선형 그라데이션(linear gradients)으로 만들어졌으며, 사용자 지정 기능을 추가하면 포럼 관리자에게 복잡성을 더하게 됩니다.

필요에 따라 테마를 포크(fork)하여 추가로 사용자 지정해 보시기 바랍니다.

좋은 지적입니다. 개선 목록에 추가하겠습니다. :+1:

6개의 좋아요

테마의 스타일링과 폼 입력, 헤더 메뉴, 모달의 일관성을 맞추도록 테마를 개선했습니다. 첫 번째 게시글에 최신 스크린샷을 업데이트했습니다. :slight_smile:

5개의 좋아요

정말 예쁜 테마네요. 곧 사용해보려 합니다. 감사합니다, 잘 만드셨어요.

2개의 좋아요

안녕하세요, 테마가 정말 좋습니다. 상단의 여백을 줄이는 방법이 있을까요? (화살표 참조)

2개의 좋아요

기본 margin-top을 30px으로 줄였습니다:

필요에 따라 테마를 포크하여 더 자유롭게 커스터마이징해 보세요. :slight_smile:

3개의 좋아요

개인적으로 더 작은 마진이 그라디언트를 너무 눈에 띄게 만든다고 생각합니다. :confused:

이것을 배경으로 구현하는 데 올바른 방향으로 안내해 주실 수 있나요? https://codepen.io/chris22smith/pen/RZogMa

1개의 좋아요

이 테마를 정말 좋아해서, 제가 있는 포럼에 이 테마를 요청할까 합니다. 다만 몇 가지 질문이 있어서요.

저는 Discourse를 이용해 포럼을 구축하는 사람이 아니라, 단순히 포럼 사용자입니다. 그래서 질문이 어색하거나 너무 당연한 내용일 수 있지만, 저는 Discourse를 이용해 무언가를 만들어 본 적이 없거든요.

이 테마의 다크 모드 버전을 만들 계획이 있을까요? 개인적으로 Edge에서 ‘웹 콘텐츠에 다크 모드 강제 적용’ 옵션을 켜고 있습니다. Chrome에서도 같은 기능이 있습니다. 보통 이 기능이 도움이 되는데, 아래는 이 기능을 사용했을 때 나온 결과물들 중 일부입니다.

전체적으로는 옵션을 켜둔 상태에서도 괜찮아 보이지만, 뚜렷한 이유 없이 어색하게 보이는 부분들이 있습니다. 가능하면 다크 모드에 맞춰 조정/수정해 주셨으면 좋겠습니다 :)

다크 모드 전용 버전을 만들 때 모든 것을 수정할 필요는 없을 것 같습니다. 프로필 페이지의 이상한 색상 차이를 수정해 주신다면, 옵션을 켜둔 상태에서 거의 문제없이 사용할 수 있을 것입니다.

4개의 좋아요

아직은 없지만, 알아볼게요. 대신 다른 색상 스킴을 사용해야 할 것 같아요.

제안해 주셔서 감사합니다! 기본(원본) 라이트 버전에는 영향을 주지 않는 한 변경 사항을 적용해 보겠습니다. :slight_smile:

5개의 좋아요

방금 Discourse를 설치하고 커스터마이징을 하고 싶어서 간질간질했어요. 정말 좋은 테마를 찾아서 기쁩니다. 신선하고, 화려하며, 아름답네요. 감사합니다!

– ben

6개의 좋아요

정말 멋진 테마인데, 최근 이 테마가 discourse와 호환되지 않는 것 같습니다. 사이드바가 완전히 뭉쳐 보입니다.

`

3개의 좋아요

좋은 지적입니다! 이제 다음을 통해 수정되었습니다:

3개의 좋아요

감사합니다. 멋지고 문제가 수정되었습니다.

2개의 좋아요

안녕하세요

마지막 업데이트 이후 양쪽 모두에서 콘텐츠가 “붙어 있는” 것처럼 보입니다. 마치 오른쪽과 왼쪽 패딩/여백이 사라진 것 같습니다.

이것이 의도된 것인지요? 테마 미리보기 이미지에서는 그런 현상이 없었습니다. 어떻게 수정할 수 있을까요?

감사합니다

2개의 좋아요

이제 수정되었습니다:

이 문제를 보고해 주셔서 감사합니다 :+1:

3개의 좋아요

수정된 것을 확인했습니다!

정말 엄청나게 빨랐네요, 정말 감사합니다.

그리고 테마도 정말 멋진 것 같습니다 :slight_smile:

3개의 좋아요

상단의 파란색 액센트 바 색상을 변경하는 방법에 대해 설명해 주실 수 있나요?

desktop.scss 파일에서 이것이 다음과 같이 정의되어 있는 것을 볼 수 있습니다:

#main-outlet {
  border-top: 8px solid $tertiary;
}

여기서 $tertiary는 Discourse 코어 SCSS에서 정의된 변수에서 가져온 것으로 추정되며, 사용자가 선택한 색상 팔레트에서 값을 가져와야 합니다.

개발자 도구(devtools)에서 해당 바가 #3977ff로 설정되어 있는 것을 볼 수 있으며, 이는 아래 스크린샷의 파란색 바로 확인할 수 있습니다. 하지만 제 색상 팔레트에서는 "tertiary"에 노란색이 설정되어 있고, #3977ff라는 색상은 어디에도 정의되어 있지 않습니다.

그래서 여기에서 무슨 일이 일어나고 있는지, 그리고 어떻게 색상을 설정할 수 있는지 알려 주세요.

1개의 좋아요

아! tertiary가 about.json에 정의되어 있네요:

  "color_schemes": {
    "radiant": {
      "primary": "000000",
      "tertiary": "3977FF",
      "header_primary": "4d4d4d"
    }
  },

그러면 색상 값이 여기서 가져와지는 것 같네요. 그런데 왜 ‘radiant’ 색상 스킴을 선택하지 않았는데도 여기서 값을 가져오는 걸까요?