# How do you set alternating colors in the list of topics

**URL:** <https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768>\
**Category:** Development\
**Created:** [7월 3, 2016, 10:52오전 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768 "2016-07-03T10:52:26Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Greg11](https://avatars.discourse-cdn.com/v4/letter/g/4491bb/32.png) [@Greg11](https://meta.discourse.org/u/Greg11)\
**Post date:** [7월 3, 2016, 10:52오전 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/1 "2016-07-03T10:52:26Z")

</div>

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

example:

 ![](https://global.discourse-cdn.com/meta/original/4X/8/f/8/8f8de77bae8b22db3307315b4d7eed6a5c976484.png)

---

<div class="post-metadata">

**Author:** ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)\
**Post date:** [7월 3, 2016, 11:07오전 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/2 "2016-07-03T11:07:46Z")

</div>

You can achieve this with a CSS customization. Here’s an example to get you started:

```css
.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:

 ![](https://global.discourse-cdn.com/meta/original/3X/5/1/5176b5f680adcbe1ad593874f79e4b5a378c6cc3.png)

---

<div class="post-metadata">

**Author:** ![Silvanus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/silvanus/32/62831_2.png) [@Silvanus](https://meta.discourse.org/u/Silvanus)\
**Post date:** [8월 3, 2016, 5:11오후 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/3 "2016-08-03T17:11:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [8월 3, 2016, 5:54오후 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/4 "2016-08-03T17:54:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)\
**Post date:** [3월 22, 2018, 4:50오전 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/5 "2018-03-22T04:50:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)\
**Post date:** [3월 22, 2018, 8:44오전 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/6 "2018-03-22T08:44:50Z")

</div>

> [@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:

```plaintext
Error: Undefined variable: "$primary-low".
        on line 2 of theme_field.scss
>> background-color: $primary-low;
   ----------------------^

```

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [3월 22, 2018, 12:45오후 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/7 "2018-03-22T12:45:48Z")

</div>

I’ve run into the same problem. What solved it for me was adding this at the top:

```plaintext
@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](https://meta.discourse.org/t/how-to-use-discourse-core-variables-in-your-theme/77551):
>
> 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 smileVariables? 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…

---

<div class="post-metadata">

**Author:** ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)\
**Post date:** [3월 22, 2018, 1:10오후 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/8 "2018-03-22T13:10:10Z")

</div>

That did it, thanks ❤

Here you go:

[https://github.com/fefrei/discourse-tiger-stripes](https://github.com/fefrei/discourse-tiger-stripes)

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [3월 22, 2018, 10:41오후 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/9 "2018-03-22T22:41:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)\
**Post date:** [3월 23, 2018, 9:28오전 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/10 "2018-03-23T09:28:17Z")

</div>

> [@codinghorror](#):
>
> I guess 🐅 stripes are less… black and white?

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

 ![pexels-photo-533055-bw](https://global.discourse-cdn.com/meta/original/3X/e/5/e580f262bdc5b21a2c2d24bd18e26885e0f795cb.jpg)

 ![wildlife-mammal-fauna-savanna-zebra-vertebrate-595552-pxhere-tiger](https://global.discourse-cdn.com/meta/original/3X/5/9/5910e55b9adc6ab82b1766ff1c08129e78827a8e.jpg)

---

<div class="post-metadata">

**Author:** ![pqMMA](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pqmma/32/176332_2.png) [@pqMMA](https://meta.discourse.org/u/pqMMA)\
**Post date:** [4월 15, 2020, 10:22오후 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/11 "2020-04-15T22:22:59Z")

</div>

토픽 상세 페이지에서 답글을 번갈아 표시하려면 어떻게 해야 할까요?

---

<div class="post-metadata">

**Author:** ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)\
**Post date:** [5월 14, 2020, 8:39오전 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/12 "2020-05-14T08:39:23Z")

</div>

조금 더 복잡한 측면이 있습니다. `post-stream` 클래스에도 동일한 원칙을 적용해 볼 수 있지만, 이 클래스에는 답글뿐만 아니라 위 게시물 상단에 있는 \_2년 후\_와 같은 "격차"도 포함되어 있습니다. 따라서 이러한 요소들도 계산에 포함되며 영향을 받을 수 있습니다.

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [2월 13, 2023, 1:42오후 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/14 "2023-02-13T13:42:10Z")

</div>

라이트 테마나 다크 테마 중 어떤 것이 사용되고 있는지에 따라 다른 색상을 적용하려면 어떤 방식으로 구현하는 것이 가장 좋을까요?

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2월 14, 2023, 4:22오후 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/15 "2023-02-14T16:22:52Z")

</div>

이 주제에서 질문에 대한 답변을 찾을 수 있을지도 몰라요 🙂 :

> [@다크 모드를 위한 특정 클래스가 없음](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984?u=canapin):
>
> Continuing the discussion from [How to add a specific body class for the dark (or light) mode?](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/10): 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](https://meta.discourse.org/t/locations-plugin/69742/841))

---

<div class="post-metadata">

**Author:** ![ToyKeeper](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toykeeper/32/297360_2.png) [@ToyKeeper](https://meta.discourse.org/u/ToyKeeper)\
**Post date:** [3월 14, 2023, 9:43오전 UTC](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/16 "2023-03-14T09:43:54Z")

</div>

> [@rahim123](#):
>
> 라이트 테마와 다크 테마 중 어느 것이 사용 중인지에 따라 다른 색상을 적용하는 가장 좋은 방법은 무엇일까요?

동작하는 방법에는 적어도 두 가지가 있습니다:

- 서로 다른 테마에 대해 다른 색상을 사용하세요.
- 반투명한 중간 회색으로 행을 채우면, 밝은 배경과 어두운 배경 모두에서 작동합니다. 예를 들어, `nth-child(odd)` 행에 `background: #80808040;`과 같은 색상을 지정하는 것입니다.

도움이 된다면, 첫 번째 방법인 테마별 색상 설정을 시연하는 스타일시트 오버라이드를 게시했습니다. 자세한 내용은 `style.css`에서 `nth-child`가 포함된 부분을 확인해 보세요.

> [@화려한 테마를 작성 중... 업스트림에 보내야 할까요?](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076):
>
> 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…

라이트 테마에서 어떻게 보이는지 예시입니다:

 ![unread-light](https://global.discourse-cdn.com/meta/original/4X/5/b/8/5b838d671e403063b19db50d615ba02f32384d20.png)

… 각 테마에는 자체적인 색상 정의가 있으므로, 테이블 행이 각 테마에 맞게 조정됩니다.