Why isn't code showing with red text anymore?

Question

The Trello docs show that text entered between backticks `like this` should appear in red text. For me it's showing as black text on a light gray background. This means that these snippets no longer stand out in my cards like they used to.

This previous question suggests turning off colorblind mode, but I don't have it on. I turned it on then turned it off again (haha) and there was no change in the code text color. I tried it in Brave and Firefox browsers and it's always black on light gray background.

How can I get `code` text to be red again? I use this for action items as well as code so it needs to stand out.

Sadman Hossain · Answer

It is possible to convert all code text in Trello for the web app using an extension that enables you to add custom CSS rules.

You can use a CSS class selector to select all elements of the "code" class and change the text color to red (along with other changes such as "font-weight" and "font-size"):

```
code {
     color: ${#ff0000} !important;
}
```

See the last comment on this related Trello forum post for how to write code blocks (not inline code) such that your custom CSS does not affect them.

You can use the Pro for Trello Chrome extension as it has a setting for custom CSS on Trello.

I like to use the dev tools options in the Dark Reader Chrome extension because it enables to set custom CSS rules for any website.

This can be replicated on other browsers using similar extensions. Injecting custom CSS is not possible in the Android or IOS apps.

Vishaal S · Answer

Hi Niam,

Welcome to Trello Community!

We have recently implemented new changes to how the Editor works on Trello cards, and one of these changes was to change the inline code (`text`) from red to grey. This was a permanent style change that has been rolled out, and right now, there's no way to revert it back to how it was. We'll have the image from the document updated!

I'll be here if you have any questions or need anything else.