How do you set alternating colors in the list of topics? It helps usability a lot, but it is all white by default. example: [imagem]

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: [imagem]

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: https://meta.discourse.org/t/the-death-of-the-grey-no-more-tiger-striping-rows-by-default/28664?u=falco

@fefrei Care to extract this into a super simple theme component? :blush: @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.

[imagem] erlend_sh: Care to extract this into a super simple theme component? :blush: 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: [imagem] Use Discourse Core Variables in your Theme Developer Guides Discourse is incredibly customizable! The goal of this topic is to show you how make use of all the amazing options that are available to you as a theme developer. You know… so that you don’t have to reinvent the wheel smile Variables? What variables? Variables cover a large number of things, from font sizes to colors to z-index values. You can use and override the vast majority of variables in your theme editor. Colors There are many colors available for you to use or override in your them…

That did it, thanks :heart: Here you go: https://github.com/fefrei/discourse-tiger-stripes

Why not :zebra: stripes? I guess :tiger: stripes are less… black and white?

[imagem] codinghorror: I guess :tiger: stripes are less… black and white? Sorry, I don’t follow. Can you elaborate? :laughing: [pexels-photo-533055-bw] [wildlife-mammal-fauna-savanna-zebra-vertebrate-595552-pxhere-tiger]

How would you do this on a topic detail page for alternating replies?

How do you set alternating colors in the list of topics

Development

fefrei (Felix Freiberger) 23 Março , 2018 09:28 10

Sorry, I don’t follow. Can you elaborate?

Tiger Stripes component

Tópico		Respostas	Vistas
Category List Alternating Colors? Product Support	3	592	2 Março , 2019
Our custom "Dark Theme" is broken. Has light theme elements Product Support	3	756	23 Agosto , 2020
使用discourse 内置的深浅主题切换，在discourse中如何写dark下的样式,目前没有看到.dark样式 Product Support	2	204	19 Agosto , 2025
Differentiate contents from the topic list rows using different colors Development topic-list-excerpts	1	565	12 Setembro , 2023
How do colors work and how to change them? Product Support ux	4	424	20 Março , 2025

How do you set alternating colors in the list of topics

Related topics