How do you set alternating colors in the list of topics

[Greg11 (It Craftsmen Club)]

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

example:

[fefrei (Felix Freiberger)]

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:

[Silvanus]

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; }

[Falco]

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

[erlend_sh (Erlend Sogge Heggen)]

@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.

[fefrei (Felix Freiberger)]

@erlend_sh

Care to extract this into a super simple theme component?

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;
   ----------------------^

[Johani (Joe)]

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:

Use Discourse Core Variables in your Theme

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 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 th…

[fefrei (Felix Freiberger)]

That did it, thanks

Here you go:

https://github.com/fefrei/discourse-tiger-stripes

[codinghorror (Jeff Atwood)]

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

[fefrei (Felix Freiberger)]

@codinghorror

I guess stripes are less… black and white?

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

[pqMMA (Chris Palmquist)]

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

[fefrei (Felix Freiberger)]

That it somewhat more involved. You can try applying the same principle to the post-stream class, but this not only contains replies, but also “gaps”, like the 2 years later above your post, so they also count and may be affected.

[rahim123]

Quelle serait la meilleure façon de l’implémenter avec différentes couleurs en fonction de l’utilisation du thème clair ou sombre ?

[Canapin (Coin-coin le Canapin)]

Ce sujet pourrait répondre à votre question :

No specific class for dark mode

Continuing the discussion from How to add a specific body class for the dark (or light) mode?: Is this still the case? I’d like to add specific CSS for an external widget (a leaflet map) when dealing with a dark theme, is it still not possible to identify using just a CSS selector? Of course I can just create a Theme Component to apply the changes and assume the admin just adds that to the Dark Scheme, but that won’t switch automatically … (which is the current solution)

[ToyKeeper]

@rahim123

Quelle serait la meilleure façon de l’implémenter avec différentes couleurs selon que le thème clair ou sombre est utilisé ?

Il existe au moins deux méthodes qui fonctionnent :

• Utiliser des couleurs différentes pour des thèmes différents.
• Ombrer les lignes avec un gris moyen translucide, de sorte qu’il fonctionne sur des arrière-plans clairs et sombres. Par exemple, donner aux lignes nth-child(odd) une couleur comme background: #80808040;.

Si cela peut aider, j’ai publié un remplacement de feuille de style qui démontre la première méthode… en définissant les couleurs par thème. Pour plus de détails, recherchez dans style.css toutes les parties contenant nth-child.

Writing a fancy theme ... worth sending upstream, or no?

Hello! Last month, my favorite forum switched to Discourse. This was mostly an upgrade, but people complained* about the look and feel. So I decided to fix it, and ended up doing a major style revamp. Now I’m trying to decide if I should put in the effort to turn it into a proper theme and merge it upstream, or if that’s unrealistic. I think people on other forums might also appreciate it as an alternative theme, but I don’t know how difficult it would be to get things merged. What I did d…

Voici un exemple de ce à quoi cela ressemble dans un thème clair :

… et chaque thème a ses propres définitions de couleurs, de sorte que les lignes du tableau s’adaptent à chaque thème.