Mattermost-server: Remove usage of center-channel-color-## CSS variables from search and autocomplete

[mattermod]

Custom themes were added to Mattermost was added as a hackathon project a few years ago, but we never had a chance to go back and implement the feature properly. The current version relies on targeting CSS nodes from Utils.applyTheme which leads to a lot of problems such as:

• The code is difficult to read
• CSS is located far from this code so it's hard to tell when an element is themed or not
• There are performance issues when applying custom themes

Because of this, we have chosen to switch to using CSS variables to apply themes in Mattermost. Instead of using the changeCss function, we instead use CSS variables corresponding to the theme colours, so something like:

if (theme.sidebarBg) {
    changeCss('.some-element', 'color:' + changeOpacity(theme.sidebarBg, 0.2));
}

becomes

.some-element {
    color: var(--sidebar-bg);
    background-color: rgba(var(--sidebar-bg-rgb), 0.2);
}

We also initially began making new versions of the CSS variables for different colour opacities (such as --sidebar-bg-08 for that colour at 8% opacity), but we've since realized that doesn't scale well. Any usage of those variables should be replaced with the RGB version of each variable (seen above with the --sidebar-bg-rgb variable).

For a real example of these changes, see https://github.com/mattermost/mattermost-webapp/pull/6002.

---

Since this campaign is spread across multiple tickets, this ticket focuses on replacing any usage of the center-channel-color-## CSS variable with center-channel-color-rgb where it appears in the following files in the web app:

• sass/components/_suggestion-list.scss
• sass/components/_no-results-indicator.scss
• sass/components/_search.scss
• sass/components/_react-select.scss

For more details or if you have any questions, feel free to reach out to @hmhealey or message me on https://community.mattermost.com where I go by harrison.

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-29041

[haardikdharma10]

Hey @hmhealey, can you assign this to me? I would love to start working on it:)