Custom CSS

[bartebor]

It would be great if teams-for-linux allowed to define custom stylesheet for MS Teams.
As we know, the layout is not "optimal" and there are some attempts to improve that - use full screen width or make conversations less space-hungry.

An option to pass a custom CSS file (ideally compatible with those used by Stylus plugin) would be really useful.

[IsmaelMartinez]

Hi @bartebor. That sounds like a great idea.

I don't really have much time lately but I am happy to try to help/support someone implementing it.

It will be really helpful if you got an example of css to inject that you could put in here.

There is an open suggestion in the Microsoft forum, but it seems to have been there for more than a year, so I will assume Microsoft is not really going to be doing it.

https://microsoftteams.uservoice.com/forums/555103-public/suggestions/19749625-css-themes

[bartebor]

I thought of an option to pass user specified CSS file to inject instead of hardcoding it into application.
That way we could use CSS meant for Stylus plugin, such as this one: https://userstyles.org/styles/164546/compact-microsoft-teams-for-dark-theme

For the sake of testing one could use simple style such as

.ts-message-thread-body .padded-content {
    background-color: green !important;
}

[IsmaelMartinez]

I think, at this moment in time, the best that we can do is to add a config.option to load a css file into the app.

Integrating with Stylus will take a bit longer as I will need to add https://www.npmjs.com/package/stylus.

I might provide both options... not a big one and, as now I have a couple of options on how to test it, I might be able to do a bit of work tomorrow.

It might make it part or all into 0.1.15 that is just been baked. Thanks for the suggestion and info. I hope you are finding this client useful. I will update with more info as it comes.

[bartebor]

@IsmaelMartinez A config option to load custom CSS file would be great, thanks!

[IsmaelMartinez]

I added the option. I have tried a few of the ones from the list that you provided but couldn't really get them to work... but the example that you provided does work.

You can enable it by using the following command. Provide the full file location.
teams --customCSSLocation filename.css

Thanks for opening the issue and helping to solve it. Hope helps!

[bartebor]

@IsmaelMartinez It works, thanks!

To have CSS designed for Stylus working minor tweaking is needed:

• remove @-moz-document domain(teams.microsoft.com) { }
• add !important to CSS rules

Refresh option in system tray menu is extremely useful while testing CSS changes.
Thanks again!