# JS No Longer Works for Theme Component
**URL:** https://meta.discourse.org/t/js-no-longer-works-for-theme-component/388198
**Category:** Development
**Created:** [November 11, 2025, 10:26pm UTC](https://meta.discourse.org/t/js-no-longer-works-for-theme-component/388198 "2025-11-11T22:26:31Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [November 11, 2025, 10:26pm UTC](https://meta.discourse.org/t/js-no-longer-works-for-theme-component/388198/1 "2025-11-11T22:26:31Z")
Continuing the discussion from [A little help with a CSS selector?](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153):
Hi,
A little bit ago I made this topic and the JavaScript for making CSS selectors for trust levels worked. It doesn’t work anymore. This is the JS…
```plaintext
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
const allowedGroups = ["trust_level_4"]; // Add the groups you want to target
const includeUsersField = ["username"]; // Use either "id" or "username"
api.modifyClass("component:chat/message/info", (SuperClass) => {
return class extends SuperClass {
@service currentUser;
get usernameClasses() {
if (!this.currentUser) {
return super.usernameClasses;
}
const allowedGroupClasses = this.currentUser.groups
.filter((g) => allowedGroups.includes(g.name))
.map((g) => `group--${g.name}`);
const extraClasses = [
...allowedGroupClasses,
...includeUsersField.map((f) => `user--${this.currentUser[f]}`),
]
.filter(Boolean)
.join(" ");
return super.usernameClasses + " " + extraClasses;
}
};
});
})
```
And this is the CSS I was using…
`.chat-message-info__username.group–trust_level_4 {`
`.chat-message-info __username__ name {`
`color: blue;`
`}`
`}`
Any ideas on how I can fix this?
Specifically, is there some Discourse update that I should know about or does this have to do with tl4 not being a primary group or something?
Thanks!
---
### Author:  [@jahan\_gagan](https://meta.discourse.org/u/jahan_gagan)
#### Post date: [November 13, 2025, 8:33am UTC](https://meta.discourse.org/t/js-no-longer-works-for-theme-component/388198/2 "2025-11-13T08:33:13Z")
Just import the service decorator and it should work:
```plaintext
import { service } from "@ember/service";
```
Once that’s added, your `@service currentUser` will load correctly again.
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [November 13, 2025, 11:15pm UTC](https://meta.discourse.org/t/js-no-longer-works-for-theme-component/388198/3 "2025-11-13T23:15:18Z")
Edit: I put it in the script but I still can’t get it work.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [November 14, 2025, 2:30am UTC](https://meta.discourse.org/t/js-no-longer-works-for-theme-component/388198/4 "2025-11-14T02:30:35Z")
Could you share any errors in the browser console? That may help.
---
### Author:  [@jahan\_gagan](https://meta.discourse.org/u/jahan_gagan)
#### Post date: [November 14, 2025, 11:31am UTC](https://meta.discourse.org/t/js-no-longer-works-for-theme-component/388198/5 "2025-11-14T11:31:41Z")
Could you try adding the following CSS after removing your current one?
```plaintext
.chat-message-info __username.group--trust_level_4 .chat-message-info__ username__name {
color: blue !important;
}
```