How do you set alternating colors in the list of topics? It helps usability a lot, but it is all white by default.
example:
You can achieve this with a CSS customization. Here’s an example to get you started:
.topic-list-item:nth-child(even) {
background-color: #EEE;
}
.topic-list-item:nth-child(odd) {
background-color: #FFF;
}
Here’s how this looks on Meta:
And for those who are looking to change the background of topics, here’s the solution:
div.topic-post:nth-child(odd), div.small-action:nth-child(odd) { background-color: #FAFBFF; } div.topic-post:nth-child(even), div.small-action:nth-child(even) { background-color: #F6F6FF; }
And here’s the discussion about why it isn’t the default anymore:
@fefrei Care to extract this into a super simple theme component? 
@Silvanus same for your topic tweak. I was thinking maybe we’d just include it in the “tiger striping component” but commented out by default, but we might as well make it a component of its own as they really are two completely separate pieces of styling.
Sure!
Can you tell me why I cannot use $primary-low in the theme component? It’s used all over the place in core (e.g. as the background color of buttons), and I think it’s a good color for the darkened rows, but it’s undefined:
Error: Undefined variable: "$primary-low".
on line 2 of theme_field.scss
>> background-color: $primary-low;
----------------------^
I’ve run into the same problem. What solved it for me was adding this at the top:
@import "common/foundation/variables";
And then you can use those colors.
That’s the short story, the long story is here:
Why not 
stripes? I guess 
stripes are less… black and white?
토픽 상세 페이지에서 답글을 번갈아 표시하려면 어떻게 해야 할까요?
조금 더 복잡한 측면이 있습니다. post-stream 클래스에도 동일한 원칙을 적용해 볼 수 있지만, 이 클래스에는 답글뿐만 아니라 위 게시물 상단에 있는 _2년 후_와 같은 "격차"도 포함되어 있습니다. 따라서 이러한 요소들도 계산에 포함되며 영향을 받을 수 있습니다.
라이트 테마나 다크 테마 중 어떤 것이 사용되고 있는지에 따라 다른 색상을 적용하려면 어떤 방식으로 구현하는 것이 가장 좋을까요?
이 주제에서 질문에 대한 답변을 찾을 수 있을지도 몰라요 
:
동작하는 방법에는 적어도 두 가지가 있습니다:
- 서로 다른 테마에 대해 다른 색상을 사용하세요.
- 반투명한 중간 회색으로 행을 채우면, 밝은 배경과 어두운 배경 모두에서 작동합니다. 예를 들어,
nth-child(odd)행에background: #80808040;과 같은 색상을 지정하는 것입니다.
도움이 된다면, 첫 번째 방법인 테마별 색상 설정을 시연하는 스타일시트 오버라이드를 게시했습니다. 자세한 내용은 style.css에서 nth-child가 포함된 부분을 확인해 보세요.
라이트 테마에서 어떻게 보이는지 예시입니다:
… 각 테마에는 자체적인 색상 정의가 있으므로, 테이블 행이 각 테마에 맞게 조정됩니다.