# Modifying style attribute dynamically on Topic List Item

**URL:** <https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415>\
**Category:** Development\
**Created:** [January 9, 2025, 11:08pm UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415 "2025-01-09T23:08:10Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [January 9, 2025, 11:08pm UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415/1 "2025-01-09T23:08:10Z")

</div>

Disclaimer: very happy with the direction here and thanks for all the work so far as there’s a lot of power in the new system. Just need to make sure we keep some equivalent capabilities? …

> [@Upcoming topic-list changes - how to prepare themes and plugins](https://meta.discourse.org/t/upcoming-topic-list-changes-how-to-prepare-themes-and-plugins/343404/1):
>
> ## 🆘 What about other customizations?
> 
> If your customization cannot be achieved using the new APIs we’ve introduced, please let us know by creating a new #Development topic to discuss.

In my Component, TLP, I’m currently setting the style attribute of the Topic List Item outer tag dynamically:

- setting the `background:` colour to a unique RGB value to match the dominant colour of the image. This should ideally be done in Ember loop.

I’m also setting setting `grid-row-end` to very quickly determine the size of the masonry element. This is very fast and efficient and avoids a lot of Javascript. However, for this I’m using Javascript as depends on the final sizes in the DOM.

Currently these co-exist happily.

![image](https://global.discourse-cdn.com/meta/original/4X/1/7/8/17855cf42e3fc521b0fd96bd6ff372aea8fae089.png)

`<tr style="background: rgb(56, 10, 58); grid-row-end: span 48;" data-topic-id="23321" id="ember168" class="topic-list-item category-uncategorized tag-inforunners visited white-text has-thumbnail tiles-grid-item ember-view" data-is-last-viewed-topic="true">`

These are both critical customisations to the Theme Component and without them, it would not be supportable.

This first amendment to style is currently achieved with a direct style attribute binding with modifyClass, which I understand is a deprecated method.

> <https://github.com/merefield/discourse-tc-topic-list-previews/blob/2e7dadadc14bf7fe9c2fd8f123bd3ecbb36e49af/javascripts/discourse/initializers/preview-edits.js.es6#L187>

Would it be possible to have an API in the new world for this please?

Or perhaps I’ve missed an existing way to swing this?

However this is not something I believe can be achieved with classes.

---

_[View the full topic](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415)._