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:
That did it, thanks 
Here you go:
Why not 
stripes? I guess 
stripes are less… black and white?
Как бы вы это реализовали на странице деталей темы для чередующихся ответов?
Это немного сложнее. Вы можете попробовать применить тот же принцип к классу post-stream, но он содержит не только ответы, но и «разрывы», вроде надписи 2 года спустя над вашим сообщением, поэтому они тоже учитываются и могут быть затронуты.
Как лучше всего реализовать это с разными цветами в зависимости от того, используется светлая или темная тема?
Эта тема может ответить на ваш вопрос 
:
Существует как минимум два рабочих метода:
- Использовать разные цвета для разных тем.
- Затенять строки полупрозрачным средним серым цветом, чтобы это работало как на светлом, так и на тёмном фоне. Например, для строк
nth-child(odd)задать цвет вродеbackground: #80808040;.
Если это поможет, я опубликовал переопределение стилей, демонстрирующее первый метод — установку цветов для каждой темы. Для деталей найдите в style.css любые части, содержащие nth-child.
Вот пример того, как это выглядит в светлой теме:
… и у каждой темы есть свои определения цветов, поэтому строки таблицы соответствуют каждой теме.